CSS3 Android按鈕是現代Web開發中廣泛使用的一種按鈕樣式,其外觀類似于Android設備上的按鈕。通過CSS3的樣式屬性,我們可以輕松地創建這種具有復雜功能的按鈕,而無需使用JavaScript。
/* Android按鈕樣式 */ .android-btn { display: inline-block; padding: 10px 15px; font-size: 16px; font-weight: bold; text-decoration: none; color: #fff; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4); border-radius: 5px; background: #63C7E7; background: linear-gradient(to bottom, #63C7E7 0%, #2FA4E7 100%); border: none; box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.4); cursor: pointer; } .android-btn:hover, .android-btn:focus { color: #fff; background: #2FA4E7; background-image: linear-gradient(to bottom, #2FA4E7 0%, #63C7E7 100%); }
在上面的樣式中,我們使用了一些CSS3屬性來創建我們的Android按鈕:
- linear-gradient屬性用于創建漸變顏色的背景。
- box-shadow屬性用于創建按鈕的陰影效果。
- border-radius屬性用于控制按鈕的圓角效果。
我們還使用了:hover和:focus偽類來創建按鈕被鼠標懸停或聚焦時的樣式。
有了這個樣式,我們只需要在HTML代碼中使用以下標簽和類來創建Android按鈕:
按鈕
你可以根據實際需要修改樣式屬性來創建不同樣式的Android按鈕。