CSS3制作個性按鈕非常容易,通過設置不同的樣式和屬性,可以輕松地創建出各種不同外觀的按鈕。
.button { display: inline-block; font-size: 16px; font-weight: bold; color: #fff; text-align: center; vertical-align: middle; text-decoration: none; background-color: #ff0000; border: 1px solid #ff0000; border-radius: 5px; padding: 10px 20px; box-shadow: 0 5px #b10000; } .button:hover { background-color: #b10000; border-color: #b10000; box-shadow: 0 5px #700000; } .button:active { background-color: #700000; border-color: #700000; box-shadow: none; transform: translateY(5px); }
上面的代碼展示了一個基本的按鈕樣式,包括了背景色、邊框、文字顏色等屬性。在:hover和:active狀態下,通過修改背景色和邊框顏色以及添加動畫效果,使得按鈕更加生動有趣。
還可以通過添加漸變效果、背景圖片等屬性,創造出更加獨特的按鈕樣式。例如:
.gradient-button { background-image: linear-gradient(#ff0000, #b10000); color: #fff; border-radius: 5px; padding: 10px 20px; box-shadow: 0 5px #b10000; } .image-button { background-image: url(btn-image.png); background-repeat: no-repeat; background-position: center; color: #fff; border-radius: 5px; padding: 10px 20px; box-shadow: 0 5px #b10000; }
以上代碼展示了兩種不同的按鈕樣式,一種是使用漸變效果,一種是使用背景圖片。通過使用不同的樣式和屬性,可以輕松地創造出各種不同外觀的按鈕。