CSS3有許多令人驚嘆的新功能,其中之一就是玻璃按鈕。玻璃按鈕使用CSS3的box-shadow屬性來創建三維效果,使按鈕看起來像是玻璃制品。本文將介紹如何使用CSS3創建一個漂亮的玻璃按鈕。
.button { display: inline-block; background-color: #d1d1d1; border-radius: 10px; padding: 10px 20px; text-transform: uppercase; font-weight: bold; color: #444; text-shadow: 1px 1px #fff, -1px -1px #fff; box-shadow: inset -1px -1px rgba(255,255,255,0.5), inset 1px 1px rgba(0,0,0,0.2); } .button:hover { box-shadow: inset 1px 1px rgba(255,255,255,0.3), inset -1px -1px rgba(0,0,0,0.2), 0px 0px 10px #ccc; }
首先,創建一個帶有基本樣式的button類。然后,使用box-shadow屬性來創建一個三維效果(注意inset,這意味著陰影將在按鈕之內而不是之外)。接下來,在:hover狀態下改變box-shadow屬性,以創建一個更真實的玻璃效果。
玻璃按鈕可以在網站的許多地方使用,例如導航菜單、提交按鈕等等。只需根據需要更改按鈕的大小和其他樣式即可。
下一篇css3畫心