DIV CSS 佈局教程網

今天為大家分享一些用css3寫出來的創意樣式按鈕。這套按鈕樣式在鼠標經過時、點擊時都有一些微妙的變換，包含一些簡單CSS3過渡效果、動畫效果以及Javascript的輔助控制效果。在這套創意樣式按鈕當中，很多地方都是巧妙的使用了 :before和 :after等偽元素。

查看預覽 下載附件

基本Html結構以及樣式示例

下面就來看看具體的效果和實現方法的一個示例。創建一個按鈕是非常簡單的，只需要一個<button></button>標簽。

<button class="btn btn-6 btn-6d">Button</button>

從上面代碼可以看出，加了幾個樣式（btn btn-6 btn-6d），其中的 “btn” 為公共樣式，其他兩個則為特定按鈕的特定樣式。在這裡就是使用了一個css編寫小技巧，在我們編寫css樣式時，可以把公共部分提取出來，然後在需要的地方調用。這樣子寫出來的CSS代碼將會更加容易維護和簡短，同時也確保頁面中的樣式統一。

下面就是其中的一個例子（Button 6d）的特定樣式：

/* Button 6d */

 .btn-6d { border: 2px dashed #226fbe; }

  .btn-6d:hover { background: transparent; color: #226fbe; }

這部分樣式就決定了特定按鈕之間的差異性。

查看預覽 下載附件

好了，具體的每個按鈕的創意樣式，可以看看演示頁面，希望可以給你帶來幫助和靈感的啟發。