色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3玻璃按鈕

呂致盈1年前8瀏覽0評論

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屬性,以創建一個更真實的玻璃效果。

玻璃按鈕可以在網站的許多地方使用,例如導航菜單、提交按鈕等等。只需根據需要更改按鈕的大小和其他樣式即可。