最新的Web開發教程
 

W3.CSS按鈕


鈕扣

隨著W3.CSS,所有的HTML元素可以是按鈕。

但最常見的元素是<輸入>,<按鈕>和<A>:

<input class="w3-btn" value="Input Button">

<button class="w3-btn">Button Button</button>

<a class="w3-btn" href="http://www.w3ii.com">Link Button</a>
試一試»

按鈕顏色

按鈕進來你需要的所有顏色:

<button class="w3-btn w3-khaki">Khaki</button>
<button class="w3-btn w3-yellow">Yellow</button>
<button class="w3-btn w3-orange">Orange</button>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-purple">Purple</button>
試一試»

哈弗顏色

懸停進來你需要的所有顏色效果:

<button class="w3-btn w3-hover-khaki">Khaki</button>
<button class="w3-btn w3-hover-white">White</button>
<button class="w3-btn w3-hover-red">Red</button>
<button class="w3-btn w3-hover-purple">Purple</button>
試一試»

的按鈕形狀

按鈕進來你所需要的各種形狀:

<button class="w3-btn">Normal</button>
<button class="w3-btn w3-round">Round</button>
<button class="w3-btn w3-round-large">Rounder</button>
<button class="w3-btn w3-round-xlarge">and Rounder</button>
<button class="w3-btn w3-round-xxlarge">and Rounder</button>
試一試»

按鈕大小

按鈕進來,你需要的所有尺寸:

<button class="w3-btn w3-tiny">Tiny</button>
<button class="w3-btn w3-small">Small</button>
<button class="w3-btn w3-medium">Medium</button>
<button class="w3-btn w3-large">Large</button>
<button class="w3-btn w3-xlarge">xLarge</button>
試一試»

按鈕邊框

按鈕可以有邊界。



<button class="w3-btn w3-white w3-border">Button</button>
<button class="w3-btn w3-light-grey w3-border">Button</button>
<button class="w3-btn w3-yellow w3-border">Button</button>
<button class="w3-btn w3-white w3-border w3-round">Round</button>
<button class="w3-btn w3-white w3-border w3-round-large">Round</button>
<button class="w3-btn w3-white w3-border w3-round-xlarge">Round</button>
<button class="w3-btn w3-white w3-border w3-border-blue w3-round">Button</button>
試一試»

與文字效果按鈕

按鈕可以有斜體和大膽的文字效果。

<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
試一試»

按鈕可以有陰影的文字效果。

<button class="w3-btn w3-red w3-text-shadow">Shadow</button>
<button class="w3-btn w3-red w3-text-shadow"><i>Shadow</i></button>
<button class="w3-btn w3-red w3-text-shadow"><b>Shadow</b></button>
試一試»

按鈕可以擁有苗條的和廣泛的文字效果。

<button class="w3-btn">Normal</button>
<button class="w3-btn w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
試一試»

全寬按鈕

要創建一個全寬按鍵,W3-BTN塊類添加到的元素。

全寬按鈕具有100%的寬度,並跨越父元素的整個寬度:





<button class="w3-btn-block">Button</button>
<button class="w3-btn-block w3-teal">Button</button>
<button class="w3-btn-block w3-red w3-left-align">Button</button>
試一試»

哈弗效果/禁用的按鈕

按鈕中脫穎而出,當你鼠標移到他們。

普通按鈕顯示手指指針。

禁用按鈕是不透明的,並顯示“沒有停車標誌”。

<button class="w3-btn">Button</button>
<button class="w3-btn w3-disabled">Button</button>

<input type="button" class="w3-btn" value="Button">
<input type="button" class="w3-btn" value="Button" disabled>
試一試»

按鈕組

按鈕可以組合在一起使用“W3-BTN-組”(中間沒有空格):


<div class="w3-btn-group">
  <button class="w3-btn">Button</button>
  <button class="w3-btn w3-teal">Button</button>
  <button class="w3-btn" disabled>Button</button>
</div>

<div class="w3-btn-group">
  <button class="w3-btn w3-light-grey" style="width:33.3%">One</button>
  <button class="w3-btn w3-light-grey" style="width:33.3%">Two</button>
  <button class="w3-btn w3-light-grey" style="width:33.3%">Three</button>
</div>
試一試»

有漣漪效應按鈕

按鈕可以有漣漪效應被點擊時:

<button class="w3-btn w3-ripple">Button</button>
<button class="w3-btn w3-ripple w3-red">Button</button>
<button class="w3-btn w3-ripple w3-yellow">Button</button>
試一試»

按鈕元素

與W3.CSS,所有元件可以是一個按鈕。

圖片可以是一個按鈕

任何股利,頁眉,頁腳或其他容器可以是一個按鈕。


浮動按鈕

W3-BTN-浮動班,創建了旨在為重要的功能按鈕,圓形:

+ +

<a class="w3-btn-floating w3-teal">+</a>
<a class="w3-btn-floating w3-disabled">+</a>
試一試»

使用W3-BTN-浮動大型類大型浮按鈕:

+ +

<a class="w3-btn-floating-large w3-teal">+</a>
<a class="w3-btn-floating-large w3-disabled">+</a>
試一試»