Skip to content

Instantly share code, notes, and snippets.

@samermurad

samermurad/ripple-button.js

Created March 7, 2026 17:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save samermurad/d61cc6ab1925a5283151d205613446a5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save samermurad/d61cc6ab1925a5283151d205613446a5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ripple-button.js
class RippleButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
static get observedAttributes() {
return ['color', 'text'];
}
connectedCallback() {
this.render();
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
this.render();
}
}
render() {
const color = this.getAttribute('color') || 'orange';
const text = this.getAttribute('text') || 'RIPPLE BUTTON';
this.shadowRoot.innerHTML = `
<style>
@import url(https://fonts.googleapis.com/css2?family=Lilita+One&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap);
* {
font-family: 'Lilita One', sans-serif;
--ease-bezier: cubic-bezier(0.35, 1.75, 0.75, 1);
}
.ripple-button {
/*// BACKGROUNDS VARS*/
--color-1: linear-gradient(to bottom, #505050, #2E2C2C);
--color-2: #8E8E8E;
--color-3: #505050;
--bg-highlight-gradient-stop-p: 60%;
--bg-base: var(--color-1);
--bg-highlight: linear-gradient(45deg, var(--color-2) var(--bg-highlight-gradient-stop-p), var(--color-3) var(--bg-highlight-gradient-stop-p)) no-repeat;
--bg-highlight-flat: var(--color-3);
/* BASE DESIGN */
transition: all 0.2s var(--ease-bezier);
cursor: pointer;
transform-origin: bottom;
user-select: none;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border: 0.2vh solid black;
border-radius: clamp(10px, calc(0.1vh * 10), 14px);
box-shadow: 0 0.5dvh 1dvh rgba(0, 0, 0, 0.2);
padding: 5% 2vh 10% 2vh;
min-width: 80px;
max-width: 180px;
height: auto;
outline: none;
-webkit-tap-highlight-color: transparent;
background: var(--bg-base);
overflow: hidden;
}
.ripple-button .highlight-layer {
transition: all 0.2s var(--ease-bezier);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 10%;
border-radius: calc(0.9 * 1vh);
z-index: 0;
display: block;
background: var(--bg-highlight);
}
.ripple-button .content-layer {
display: block;
position: relative;
color: white;
font-size: 1.25rem;
-webkit-text-stroke: thick black;
paint-order: stroke fill;
}
.ripple-button.color-green {
--color-1: #32A820;
--color-2: #98f454;
--color-3: #77ea64;
}
.ripple-button.color-red {
--color-1: #AF2A23;
--color-2: #ed544c;
--color-3: #e0463d;
--bg-highlight-gradient-stop-p: 36%;
}
.ripple-button.color-orange {
--color-1: linear-gradient(to bottom, #FE8744, #E91450);
--color-2: #f85800;
--color-3: #FE8744;
}
.ripple-button.color-gray {
--color-1: linear-gradient(to bottom, #505050, #2E2C2C);
--color-2: #A1A1A1;
--color-3: #8E8E8E;
}
.ripple-button.color-blue {
--color-1: #1599f3;
--color-2: #0bd5fd;
--color-3: #00c8ff;
}
.ripple-button.color-mint {
--color-1: #187971;
--color-2: #65f5d8;
--color-3: #3aebc8;
}
.ripple-button.color-gold {
--color-1: #DC920B;
--color-2: #FCD800;
--color-3: #ffe676;
}
.ripple-button::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 100%;
transition: all 0s linear;
transform: scale(0);
background: radial-gradient(circle, rgba(110, 109, 109, 0.5) 50%, transparent);
opacity: 0.5;
z-index: 0;
}
.ripple-button:active::after {
transform: scale(2);
transition: all 0.2s linear;
}
.ripple-button:active {
transform: scale(1.1, 0.9);
transition-delay: 0s !important;
transition-duration: 0.1s !important;
}
</style>
<button class="ripple-button color-${color}" type="button">
<span class="highlight-layer"></span>
<span class="content-layer">
<slot>${text}</slot>
</span>
</button>
`;
}
}
// Register the custom element
customElements.define('ripple-button', RippleButton);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment