/* 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;
}