按钮 · Calm Kangaroo

类型：组件　·　分类：按钮　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

<button data-label="Button :)"> Button :)
</button>
<style>
/* From Uiverse.io by ossoboy - Tags: button */
button {
 background-color: rgb(82, 163, 255);
 color: transparent;
 border: 0 none;
 padding: 15px 30px;
 text-decoration: none;
 display: inline-block;
 transition: background-color 300ms ease, color 300ms ease;
 font-size: 17px;
 position: relative;
 text-align: center;
 cursor: pointer;
}

button::before,
button::after {
 content: attr(data-label);
 display: inline-block;
 position: absolute;
 transition: all 300ms ease;
 width: 100%;
 left: 0;
 top: 50%;
 color: white;
}

button::before {
 opacity: 0;
 transform: translateY(calc(-50% - 15px));
}

button::after {
 opacity: 1;
 transform: translateY(-50%);
}

button:hover {
 background-color: rgb(66, 133, 209);
}

button:hover::before {
 opacity: 1;
 transform: translateY(-50%);
}

button:hover::after {
 opacity: 0;
 transform: translateY(calc(-50% + 15px));
}

button:active {
 background-color: rgb(82, 163, 255);
}
</style>

[/hidecontent]