CSS中,按鈕的特效是我們常常需要關(guān)注的一點。下面就讓我們來看看,如何讓按鈕更有吸引力和交互性。
/* 先定義一個基礎(chǔ)樣式 */
.btn {
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: bold;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
/* 給按鈕加上漸變色背景 */
.gradient-btn {
background: linear-gradient(to bottom, #FFB64D 0%, #FF7F50 100%);
}
/* 鼠標(biāo)移上去的效果 */
.gradient-btn:hover {
background: linear-gradient(to bottom, #FF7F50 0%, #FFB64D 100%);
}
/* 點擊后的效果 */
.gradient-btn:active {
background: linear-gradient(to bottom, #FF7F50 0%, #FFB64D 100%);
transform: translateY(1px);
}
上面的代碼是一個簡單的按鈕特效,包括了漸變色背景和鼠標(biāo)移上去和點擊后的樣式變化。當(dāng)然,還有很多其他的特效,比如加陰影、加邊框、字體大小變化等等。簡單的CSS代碼可以讓按鈕變得更加美觀和易于交互,這些效果可以應(yīng)用于各種不同類型的網(wǎng)頁和應(yīng)用程序。