在web開發(fā)中,按鈕是常常用到的元素之一。除了按鈕文字本身的含義外,樣式也是很重要的。下面介紹一種簡(jiǎn)單實(shí)用的css2按鈕樣式:
.btn { display: inline-block; padding: 10px 20px; color: #fff; background-color: #007bff; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } .btn:hover { background-color: #0069d9; } .btn:active { background-color: #005cbf; }
上述代碼中,定義了一個(gè)名為btn的class,實(shí)現(xiàn)了以下效果:
- 按鈕使用inline-block布局,可以與其他元素在同一行顯示
- 按鈕內(nèi)有一定的內(nèi)邊距,便于點(diǎn)擊
- 按鈕文字顏色為白色,背景色為藍(lán)色
- 按鈕沒有邊框,使用圓角矩形作為邊緣
- 按鈕文字字號(hào)為16px
- 鼠標(biāo)懸停在按鈕上時(shí),背景色變?yōu)樯钏{(lán)色
- 在按鈕被點(diǎn)擊時(shí),背景色變?yōu)楦畹乃{(lán)色
通過實(shí)現(xiàn)這種簡(jiǎn)單的css2按鈕樣式,可以快速地為網(wǎng)站的按鈕元素添加美觀的樣式,提升網(wǎng)站用戶體驗(yàn)。