在web開發中,按鈕是常常用到的元素之一。除了按鈕文字本身的含義外,樣式也是很重要的。下面介紹一種簡單實用的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; }
上述代碼中,定義了一個名為btn的class,實現了以下效果:
- 按鈕使用inline-block布局,可以與其他元素在同一行顯示
- 按鈕內有一定的內邊距,便于點擊
- 按鈕文字顏色為白色,背景色為藍色
- 按鈕沒有邊框,使用圓角矩形作為邊緣
- 按鈕文字字號為16px
- 鼠標懸停在按鈕上時,背景色變為深藍色
- 在按鈕被點擊時,背景色變為更深的藍色
通過實現這種簡單的css2按鈕樣式,可以快速地為網站的按鈕元素添加美觀的樣式,提升網站用戶體驗。