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