CSS3按鈕是網頁設計中經常用到的工具,它能夠為按鈕添加漸變、圓角、陰影等多種樣式效果,使得按鈕更加美觀和實用。下面是幾個優秀的CSS3按鈕。
.btn1 { background: linear-gradient(to bottom, #7ab6e3 0%,#7ab6e3 70%, #478aca 71%,#478aca 100%); border: 2px solid #2e5dad; border-radius: 20px; color: white; font-weight: bold; text-shadow: 1px 1px #2e5dad; }
按鈕1的特點是漸變背景和實心邊框,顏色簡潔明快,給人精神氣爽的感覺。
.btn2 { background-color: #1e63b3; border: none; color: #fff; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 50px; box-shadow: 5px 5px 5px #888888; }
按鈕2是一個簡約大氣的圓形按鈕,背景色鮮明,按鈕周圍有模糊陰影,給人凝重穩重的感覺。
.btn3 { background-color: #ff6347; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 20px; transition-duration: 0.4s; cursor: pointer; } .btn3:hover { background-color: #f44336; }
按鈕3是一個具有交互效果的按鈕,背景色為鮮艷的紅色,鼠標懸停時背景色改變,顯示出動態活潑的特點。
以上是三個優秀的CSS3按鈕,它們各具特色,不同的網頁需要選擇適合的按鈕,以達到更好的視覺效果和用戶體驗。