css果冻按钮样式。。 |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;
}

上述代码实现了一个简单的果冻按钮效果。按钮在常态下呈现出饱满的状态，当用户悬停鼠标在按钮上时，按钮会微微向下凹陷，并在底部呈现出模拟的阴影。当用户点击按钮时，按钮会瞬间恢复原来的状态，模拟出一个类似于果冻般的效果。

这种效果可以非常有效地吸引用户的注意力，并且如果和其他有趣的视觉效果一起使用，可以让用户对网站产生更大的兴趣和留存时间。