CSS閃動的按鈕樣式是一種非常受歡迎的CSS效果,讓按鈕在用戶鼠標(biāo)懸浮在上方時,產(chǎn)生強烈的視覺傳達(dá)效果。這種效果可以很好地吸引用戶的注意,讓用戶點擊按鈕的決心更加堅定。
.button { position: relative; display: inline-block; padding: 8px 22px; font-size: 16px; color: #fff; background-color: #2cb6a3; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: all 0.4s; } .button::before { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border: 3px solid rgba(0, 0, 0, 0.4); z-index: -1; border-radius: 8px; } .button:hover { transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .button:hover::before { opacity: 0; }
以上代碼中,“.button”類是按鈕的基本樣式,通過設(shè)置padding、font-size、color、background-color、border-radius、box-shadow等來讓按鈕呈現(xiàn)出美觀的外觀效果,同時通過設(shè)置transition動畫屬性,實現(xiàn)鼠標(biāo)懸浮時的漸變效果。
“::before”偽元素是用來添加按鈕的外邊框,并且設(shè)置z-index為-1,使得該元素位于按鈕的下層。然后通過設(shè)置:hover偽類來控制按鈕在鼠標(biāo)懸浮時的動畫效果,包括transform、box-shadow和opacity等。
總體上來說,這種CSS閃動的按鈕樣式,可以讓你的按鈕設(shè)計更吸引人的眼球,同時增加用戶點擊按鈕的欲望,提高網(wǎng)站的互動性。