2023年政策修订增补工作正在进行中，欢迎参与！
User:机智的小鱼君/WaveButton/style.css
< User:机智的小鱼君 | WaveButton
注意：在保存之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox/Safari：按住“Shift”的同时单击“刷新”，或按“Ctrl-F5”或“Ctrl-R”（Mac为“⌘-R”）
- Google Chrome：按“Ctrl-Shift-R”（Mac为“⌘-Shift-R”）
- Internet Explorer：按住“Ctrl”的同时单击“刷新”，或按“Ctrl-F5”
- Opera：在“工具→首选项”中清除缓存
- 如果您已登录但该页面出现未登录状态，请尝试在地址栏的地址最后添加代码
?_=1来访问最新页面。 - 添加代码后的本页地址如下：
-{R|https://moegirl.icu/User:%E6%9C%BA%E6%99%BA%E7%9A%84%E5%B0%8F%E9%B1%BC%E5%90%9B/WaveButton/style.css?_=1}-
/* MoeSkin like button with wave effects */
.wave-button {
position: relative;
border: 1px solid #ccc;
padding: 0.4em 1em;
border-radius: 0.2em;
transition: all 0.24s ease;
cursor: pointer;
}
.wave-button:hover {
border-color: #36ad6a;
color: #36ad6a;
}
.wave-button:active {
border-color: #0c7a43;
color: #0c7a43;
}
.wave-button::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 0.2em;
box-shadow: 0 0 0 6px #36ad6a;
opacity: 0;
transition: all 0.4s ease;
}
.wave-button:active::after {
transition: 0s;
box-shadow: 0 0 0 1px #36ad6a;
opacity: 1;
}
/* size-tiny */
.wave-button.size-tiny {
padding: 0.2em 0.6em;
font-size: 0.875em;
}
/* round */
.wave-button.round {
border-radius: 100vw;
}
.wave-button.round::after {
border-radius: 100vw;
}
/* primary */
.wave-button.primary {
background-color: #2aa863;
border: 1px solid #2aa863;
color: #fff !important;
}
.wave-button.primary:active {
background-color: #0c7a43;
}