CSS中的button用法是非常常見的,它可以作為一種交互方式,為用戶提供可點擊的按鈕來完成某種操作。如果我們想要使用button樣式,那么我們需要在HTML中使用button標簽,如下:
<button>點擊我</button>
我們還可以給button添加一些樣式,比如調整寬高、設置背景色、設置字體等,如下:
<button style="width: 100px; height: 36px; background-color: #157efb; color: #fff; font-size: 14px;">點擊我</button>
通過上述代碼,我們給button設置了寬高,設置了背景色為#157efb,字體顏色為白色,字體大小為14px。
我們還可以給button添加鼠標移上去、點擊、離開時的樣式,如下:
<button class="btn">點擊我</button> .btn { width: 100px; height: 36px; background-color: #157efb; color: #fff; font-size: 14px; cursor: pointer; border-radius: 3px; outline: none; } .btn:hover { background-color: #0f6def; } .btn:active { background-color: #0d63c2; transform: translateY(2px); } .btn:focus { box-shadow: 0 0 0 2px rgba(44, 132, 249, 0.2); }
通過上述代碼,我們為button添加了四個狀態的樣式:鼠標移上去改變背景色為#0f6def,點擊時背景色為#0d63c2并向下移動2px,當button被聚焦時,添加一個藍色的邊框。
在實際開發中,我們還可以通過使用框架或是庫來快速開發出漂亮的button樣式。比如Bootstrap中的button樣式:
<button class="btn btn-primary">點擊我</button>
通過使用Bootstrap,可以輕松地為button添加漂亮的樣式。
上一篇css中br標簽