CSS3的出現給我們的開發帶來了很多方便，其中很重要的一點就是樣式的制作，如今我們可以使用CSS3來制作非常炫酷的按鈕，下面是一個CSS3按鈕的圖解：

.btn {
background: linear-gradient(#ff5f6d, #ff0a87);
border: none;
border-radius: 50px;
color: white;
cursor: pointer;
font-size: 1.2em;
padding: 10px 25px;
position: relative;
text-transform: uppercase;
}
.btn:hover {
box-shadow: 0px 1px 10px #ff5f6d;
}
.btn::before {
content: "";
position: absolute;
background: linear-gradient(#ff5f6d, #ff0a87);
border-radius: 50px;
bottom: -5px;
left: -2px;
right: -2px;
top: -2px;
z-index: -1;
}
.btn:hover::before {
box-shadow: 0px 1px 10px #ff5f6d;
}

首先，在.btn類中我們定義了按鈕的背景為線性漸變，從#ff5f6d到#ff0a87，同時不設定任何邊框。讓按鈕具有圓角，字體顏色為白色，光標為手指形狀，字體大小為1.2em，padding設置上下10像素，左右25像素，位置為相對，文本轉換為大寫。

接著，在.btn:hover類中我們設定當鼠標在按鈕上移動時出現一個陰影效果。

最后，在.btn::before類中，我們繪制了一個和按鈕尺寸大小相同的背景圓，使它的層級為-1，可以使它的位置在按鈕的下層。當鼠標在按鈕上移動時，它會出現一個和按鈕相同的陰影效果，帶來非常酷炫的效果。

上述方式只是基本的，如果您有更多的創意，歡迎參考CSS3按鈕的其他方法。