在網頁設計中,優美的按鈕樣式是非常重要的。默認的按鈕樣式不一定符合設計要求,這時我們就需要使用CSS自定義按鈕樣式。
/* CSS代碼 */ .btn { display: inline-block; padding: 10px 20px; border-radius: 5px; color: #fff; background-color: #007bff; font-size: 16px; text-decoration: none; text-align: center; } .btn:hover { background-color: #0062cc; cursor: pointer; } .btn:active { background-color: #005cbf; outline: none; }
我們可以在CSS中定義.btn類,設置按鈕的大小、圓角、顏色、背景等屬性。同時,還可以針對不同的狀態(如鼠標懸停、按鈕被點擊)進行樣式的定義。這樣,我們就可以輕松地實現自定義按鈕的效果。
<!-- HTML代碼 --> <a href="#" class="btn">按鈕</a>
在HTML中,僅需要在按鈕上應用.btn類即可。如此簡單的操作,就可以創建出一個優美的按鈕樣式。
上一篇css自定義box高度