在現(xiàn)代的網(wǎng)站設(shè)計(jì)中，為了提高用戶體驗(yàn)，有時(shí)會(huì)采用一些有趣的視覺(jué)效果來(lái)吸引用戶的注意力。其中一個(gè)比較流行的效果就是 CSS 果凍按鈕樣式。

/* css代碼 */
.jelly-btn {
font-size: 1em;
font-weight: bold;
padding: 10px 20px;
border-radius: 20px;
background-color: #008CBA;
color: #fff;
box-shadow: 0 5px #006B9F;
position: relative;
transition: all 0.2s ease-in-out;
}
.jelly-btn:hover {
top: -5px;
box-shadow: 0 8px #006B9F;
}
.jelly-btn:active {
top: 0;
box-shadow: none;
}

上述代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的果凍按鈕效果。按鈕在常態(tài)下呈現(xiàn)出飽滿的狀態(tài)，當(dāng)用戶懸停鼠標(biāo)在按鈕上時(shí)，按鈕會(huì)微微向下凹陷，并在底部呈現(xiàn)出模擬的陰影。當(dāng)用戶點(diǎn)擊按鈕時(shí)，按鈕會(huì)瞬間恢復(fù)原來(lái)的狀態(tài)，模擬出一個(gè)類(lèi)似于果凍般的效果。

這種效果可以非常有效地吸引用戶的注意力，并且如果和其他有趣的視覺(jué)效果一起使用，可以讓用戶對(duì)網(wǎng)站產(chǎn)生更大的興趣和留存時(shí)間。