CSS中的btn-icons指的是帶有圖標的按鈕。在網頁設計中,使用btn-icons可以使按鈕更加美觀,也可以增強按鈕的功能性。
.btn { background-color: #4CAF50; border: none; color: white; padding: 12px 24px; text-align: center; font-size: 16px; cursor: pointer; } .btn:hover { background-color: #3e8e41; } .btn-icon { background-color: transparent; background-image: url('icon.png'); background-repeat: no-repeat; background-position: center center; border: none; color: white; padding-left: 40px; } .btn-icon:hover { background-color: rgba(238, 238, 238, 0.2); }
以上代碼中,.btn是一個普通的按鈕樣式,.btn:hover是鼠標懸停在按鈕上時的樣式。.btn-icon是帶有圖標的按鈕樣式,其中使用了背景圖片,并將padding-left設置為40px,以便讓圖標位于按鈕的正中心。同時,.btn-icon:hover樣式還加入了透明度的設置,使得用戶在鼠標懸停在按鈕上時,可以更加直觀地感受到按鈕的交互效果。
綜上所述,CSS中的btn-icons可以增強網頁設計的美觀度和交互性,并且可以為用戶提供更好的使用體驗。