CSS鼠標(biāo)停留按鈕,簡(jiǎn)單說(shuō)就是鼠標(biāo)移到按鈕上會(huì)有特效出現(xiàn),是一種常見(jiàn)的交互效果,下面是一個(gè)示例:
button{ background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } button:hover{ background-color: green; color: black; transform: scale(1.1); }
上面的代碼中,我們首先定義了一個(gè)按鈕樣式,包括背景顏色、文字顏色、內(nèi)邊距、邊框、圓角等,同時(shí)設(shè)置了鼠標(biāo)指針為手型,以及所有屬性變化的過(guò)渡動(dòng)畫(huà)。
接著,在:hover偽類(lèi)中重新定義了按鈕的背景顏色和文字顏色,并且添加了一個(gè)縮放變換的特效,當(dāng)鼠標(biāo)滑過(guò)按鈕時(shí),按鈕會(huì)變得更亮更大。
這種鼠標(biāo)停留按鈕的效果,可以在網(wǎng)站設(shè)計(jì)中起到很好的交互作用,提高用戶(hù)體驗(yàn)。