CSS3是一種強大的樣式語言,可以用來美化網(wǎng)頁上的各種元素。好看的按鈕是網(wǎng)頁設(shè)計中經(jīng)常需要用到的一種元素,借助CSS3,我們可以很容易地創(chuàng)建各種好看的按鈕。
.button { display: inline-block; padding: 10px 20px; border-radius: 5px; background-color: #3ca4ff; color: #fff; font-size: 16px; text-decoration: none; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); } .button:hover { background-color: #3882C2; cursor: pointer; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); } .button:active { transform: translateY(2px); box-shadow: none; }
上述代碼展示了一個簡單的按鈕的CSS樣式。我們首先通過設(shè)置padding屬性控制按鈕的大小,通過設(shè)置border-radius屬性實現(xiàn)圓角,然后設(shè)置背景顏色和文字顏色。
我們還可以在hover狀態(tài)下給按鈕添加過渡效果和更改背景色,讓按鈕更互動。在active狀態(tài)下,讓按鈕向下移動一些像素,同時去掉box-shadow屬性,讓按鈕的變化更加自然。
當(dāng)然,CSS3不僅僅能用這些屬性來美化按鈕,還有許多其他的屬性可供使用,比如漸變、陰影、動畫等等,可以讓設(shè)計師盡情發(fā)揮創(chuàng)造力,創(chuàng)造出更加豐富多彩的按鈕樣式。
上一篇css3 拉伸填充