武林網(www.49028c.com)文章簡介：用css3寫出來的創意樣式按鈕。這套按鈕樣式在鼠標經過時、點擊時都有一些微妙的變換，包含一些簡單css3過渡效果、動畫效果以及javascript的輔助控制效果。

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

查看預覽  下載附件

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

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

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

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

查看預覽   下載附件

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