CSS的button樣式可以讓網頁更加美觀,用戶體驗也更加舒適。通過CSS可以添加樣式、調整按鈕大小、更改文字樣式和顏色。
button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 25px; }
上述代碼使用了border-radius樣式屬性,讓按鈕呈現更加圓潤的外觀。也可以通過:hover方式來設置鼠標懸停時的效果,使得按鈕更加生動。
button:hover { background-color: #3e8e41; }
除了以上代碼,還可以使用其他常用的button樣式。比如可以設置透明度、更改背景圖片和圓角樣式。
button { background-color: transparent; border: 2px solid #4CAF50; border-radius: 8px; color: #4CAF50; padding: 8px 16px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer; } button:hover { background-color: #4CAF50; color: white; }
總之,CSS提供了豐富的button樣式,可以根據具體需求來選擇適合自己的樣式,讓按鈕更加美觀實用。
上一篇java 去掉空格和回車
下一篇vue清空list集合