CSS3是一個強大的技術,提供了許多可以增強網站設計的特效,特別是在按鈕的設計方面。
.btn{ border: none; /*去掉默認邊框*/ border-radius: 30px; /*實現圓角效果*/ background-color: #4CAF50; /*設置背景顏色*/ padding: 10px 20px; /*設置按鈕內邊距*/ color: white; /*設置字體顏色*/ text-align: center; /*設置文字居中*/ text-decoration: none; /*去掉下劃線*/ display: inline-block; /*使按鈕變成塊元素*/ font-size: 16px; /*設置字體大小*/ cursor: pointer; /*設置光標形態*/ -webkit-transition-duration: 0.4s; /*設置過渡時間*/ transition-duration: 0.4s; } .btn:hover { background-color: #3e8e41; /*鼠標懸停時改變背景顏色*/ }
通過以上代碼,我們可以實現一個簡單的按鈕樣式。同時,我們還可以使用CSS3的其他技術來增強按鈕的特效。例如,我們可以添加邊框陰影效果,實現按鈕被按下后的反饋效果。
.btn:active { box-shadow: 0px 3px 0px #2e732d; /*設置按鈕陰影效果*/ transform: translateY(4px); /*按鈕按下后向下移動4個像素*/ }
這樣,我們可以美化網站按鈕樣式并為用戶提供更好的反饋效果,提升用戶體驗。
上一篇MySQL取前十條