純CSS3彩色邊線3D立體按鈕制作教程

原文:

今天我們來分享一款利用純css3實作的3d按鈕，這款按鈕的一個特點是有彩色的邊線，這讓整個按鈕顯得比較多姿多彩，沒那麼枯燥無趣。本文不僅可以讓大家看到示範效果，而且我們把制作教程也分享出來，首先來看看效果圖：

我們也可以在這裡看到。

接下來就來分享一下制作教程以及源代碼，按鈕的源代碼主要由html和css兩部分代碼組成，先來看看html代碼：

可以看到，html代碼的結構也非常清楚，沒有html5的元素，一個button和幾個div元素而已。

這裡我們定義了4個按鈕，就像效果圖上一樣，每一個按鈕都有不同顔色的邊線，具體我們會在css代碼中實作3d效果和邊線效果。

接下來是css代碼，先對所有的button進行統一樣式的渲染：

大家可以看到，所有按鈕的基本外觀就出來了，包括3d的效果。

然後就是對每個按鈕的邊線顔色以及滑鼠滑過和按鈕按下的樣式進行定義：

主要的代碼就是這些，所有的源代碼也分享了，