motionsites中文站 / 按钮 · Silly Yak
按钮 · Silly Yak
aadmin2026-09-19 发布组件0 阅读

按钮 · Silly Yak

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

[hidecontent type="vip1"]
<button> Button
</button>
<style>
/* From Uiverse.io by kiru2741 - Tags: button */
button {
 padding: 10px;
 font-size: 15px;
 outline: none;
 border: 2px solid black;
 background-color: white;
 color: white;
 position: relative;
 letter-spacing: 1px;
}

button::before {
 content: 'Button';
 /*Button's value/text-content */
 position: absolute;
 top: -14%;
 left: 7%;
 background-color: black;
 width: 100%;
 height: 100%;
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: 0.15s ease-in-out;
 font-weight: bold;
}

button:hover::before {
 top: 0;
 left: 0;
}
</style>
[/hidecontent]
← 返回首页