CSS3 懸停按鈕

.btn {
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;
transition-duration: 0.4s;
cursor: pointer;
}
.btn:hover {
background-color: white;
color: #4CAF50;
}

按鈕是網(wǎng)頁(yè)設(shè)計(jì)中最為基本的元素之一，而懸停效果則是讓按鈕更具有交互性和視覺吸引力的常用技巧。CSS3 的強(qiáng)大特性為我們提供了更多實(shí)現(xiàn)懸停效果的可能性。以上代碼使用 CSS3 實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的懸停按鈕效果，當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，按鈕的顏色和文本顏色會(huì)發(fā)生變化，給用戶以視覺反饋，增加用戶體驗(yàn)。