Zola
2026-05-16T00:00:00+00:00
https://next.siphalor.de/atom.xml
Custom Ripple Exercise
2026-05-16T00:00:00+00:00
2026-05-16T00:00:00+00:00
Siphalor
https://next.siphalor.de/blog/ripple/
<div class="heading-links">
<ul><li><a href="https://codepen.io/Siphalor/pen/ogYYrqE">Codepen</a></li>
</ul>
</div>
<p>I'm not a huge fan of Material Design, but I recently noticed that I quite enjoy the little ripple effect you get on
their buttons.<br />
You can see them in the <a rel="nofollow external" href="https://material.angular.dev/components/categories">Angular Material documentation</a>
when clicking on the cards.</p>
<p>Since I thought it would be a fun little challenge, I tried to replicate it with a bunch of more or less modern CSS
(and a bit of JS).</p>
<p>The resulting code is provided with the codepen link above.</p>
<h2 id="setup">Setup</h2>
<p>I started out with a simple HTML button and some basic styling.
The goal is not to touch this code at all.</p>
<figure class="padded">
<pre class="giallo z-code"><code data-lang="html"><span class="giallo-l"><span><</span><span class="z-entity z-name z-tag">button</span><span class="z-entity"> class</span><span>=</span><span class="z-punctuation z-definition z-string z-string">"ripple"</span><span>>Button</</span><span class="z-entity z-name z-tag">button</span><span>></span></span>
<span class="giallo-l"><span><</span><span class="z-entity z-name z-tag">button</span><span class="z-entity"> class</span><span>=</span><span class="z-punctuation z-definition z-string z-string">"primary ripple"</span><span>>Primary</</span><span class="z-entity z-name z-tag">button</span><span>></span></span>
<span class="giallo-l"><span><</span><span class="z-entity z-name z-tag">button</span><span class="z-entity"> class</span><span>=</span><span class="z-punctuation z-definition z-string z-string">"black ripple"</span><span>>Dark</</span><span class="z-entity z-name z-tag">button</span><span>></span></span></code></pre><div>
<button class="demo-button">Button</button>
<button class="demo-button primary">Primary</button>
<button class="demo-button black">Dark</button>
</div>
</figure><h2 id="layering-approaches">Layering approaches</h2>
<p>From my understanding, there are two main ways to add in the ripple circles, you can either</p>
<ul>
<li>use a <code>::before</code> or <code>::after</code> pseudo-element or</li>
<li>use a layered background on the element</li>
</ul>
<p>Both have their ups and their downs:</p>
<p>Pseudo-elements are a kind of limited resource, since there is only a maximum of one <code>::before</code> and <code>::after</code> for every
element on the page. A lot of CSS hacks tend to use them, so it is basically unavoidable
that you'll get conflicts at some points.</p>
<p>Layered backgrounds, however, require that the background on the affected elements has to be set up in a certain way, so
that the ripple can "inject" into it.<br />
While this may be a good option if you're only targeting a limited set of components, it's pretty much impossible to
just slap on a simple class with this approach.</p>
<p>I chose to use pseudo-elements for my exercise.</p>
<h2 id="foundations">Foundations</h2>
<p>First off, let's create an <code>::after</code> pseudo-element (since that naturally layers on top of the element) and make it
overlay the targeted element:</p>
<figure class="padded">
<pre class="giallo z-code"><code data-lang="css"><span class="giallo-l"><span class="z-entity">.ripple</span><span> {</span></span>
<span class="giallo-l"><span class="z-support"> position</span><span>:</span><span class="z-support z-constant"> relative</span><span>;</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span> &::after {</span></span>
<span class="giallo-l"><span class="z-support z-constant"> content</span><span>: </span><span class="z-punctuation z-definition z-string">""</span><span>;</span></span>
<span class="giallo-l"><span class="z-support"> position</span><span>:</span><span class="z-support z-constant"> absolute</span><span>;</span></span>
<span class="giallo-l"><span class="z-support"> inset</span><span>:</span><span class="z-constant"> 0</span><span>;</span></span>
<span class="giallo-l"><span class="z-support"> opacity</span><span>:</span><span class="z-constant"> 0</span><span>;</span></span>
<span class="giallo-l"><span class="z-support"> border-radius</span><span>:</span><span class="z-support z-constant"> inherit</span><span>;</span></span>
<span class="giallo-l"><span class="z-support"> background-color</span><span>:</span><span class="z-support"> rgba</span><span>(</span><span class="z-constant">255 0 0</span><span> / </span><span class="z-constant">0.6</span><span>);</span></span>
<span class="giallo-l"><span class="z-support"> pointer-events</span><span>:</span><span class="z-support z-constant"> none</span><span>;</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span> &</span><span class="z-entity">:active::after</span><span> {</span></span>
<span class="giallo-l"><span class="z-support"> opacity</span><span>:</span><span class="z-constant"> 0.3</span><span>;</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span>}</span></span></code></pre><div>
<button class="demo-button">Button</button>
<button class="demo-button primary">Primary</button>
<button class="demo-button black">Dark</button>
<style>
@scope {
.demo-button {
position: relative;
}
.demo-button::after {
content: "";
position: absolute;
inset: 0;
opacity: 0;
border-radius: inherit;
background-color: rgba(255 0 0 / 0.6);
pointer-events: none;
}
.demo-button:active::after {
opacity: 0.3;
}
}
</style>
</div>
<figcaption><p>The buttons now get a red overlay when clicked</p>
</figcaption>
</figure>
<p>Since the <code>::after</code> pseudo-elements are on top of the buttons, it is important to set <code>pointer-events: none</code>,
so that clicking the buttons still goes through to the actual button elements underneath.</p>
<p>Of course, the ripple effect should be circular. I decided to use a <code>radial-gradient</code> for this instead of a <code>border-radius</code>
since this offers some nice options for further customizing this later.</p>
<figure class="padded">
<pre class="giallo z-code"><code data-lang="css"><span class="giallo-l"><span class="z-entity">.ripple</span><span> {</span></span>
<span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> /* ... */</span></span>
<span class="giallo-l"><span> &::after {</span></span>
<span class="giallo-l"><span class="z-invalid z-deprecated"> background</span><span>: </span><span class="z-support">radial-gradient</span><span>(</span><span class="z-support z-constant">circle farthest-corner</span><span class="z-keyword"> at</span><span class="z-support z-constant"> center</span><span>,</span><span class="z-support z-constant z-constant"> currentColor 30</span><span class="z-keyword">%</span><span>,</span><span class="z-support z-constant z-constant"> transparent 100</span><span class="z-keyword">%</span><span>);</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span>}</span></span></code></pre><div>
<button class="demo-button">Button</button>
<button class="demo-button primary">Primary</button>
<button class="demo-button black">Dark</button>
<style>
@scope {
.demo-button {
position: relative;
}
.demo-button::after {
content: "";
position: absolute;
inset: 0;
opacity: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(circle farthest-corner at center, currentColor 30%, transparent 30%, transparent 100%);
}
.demo-button:active::after {
opacity: 0.3;
}
}
</style>
</div>
</figure>
<p>To have some automatically adapting contrast, one can use <code>currentColor</code> to use the text color inside this background.</p>
<h2 id="animating">Animating</h2>
<p>The circle shouldn't just statically rest where it is, but should grow out when clicked and
slowly fade out when let go.</p>
<p>To transition the gradient, we can use a custom property. For transitioning them, it is required to declare them with
an <code>@property</code> at-rule.</p>
<figure class="padded">
<pre class="giallo z-code"><code data-lang="css"><span class="giallo-l"><span class="z-keyword">@property</span><span> --ripple-size {</span></span>
<span class="giallo-l"><span> syntax: "<percentage</span><span class="z-keyword">></span><span>";</span></span>
<span class="giallo-l"><span> inherits: false;</span></span>
<span class="giallo-l"><span class="z-entity z-name z-tag"> initial-value</span><span>: 0%;</span></span>
<span class="giallo-l"><span>}</span></span>
<span class="giallo-l"><span class="z-entity">.ripple</span><span> {</span></span>
<span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> /* ... */</span></span>
<span class="giallo-l"><span> &::after {</span></span>
<span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> /* ... */</span></span>
<span class="giallo-l"><span class="z-invalid z-deprecated"> background</span><span>: </span><span class="z-support">radial-gradient</span><span>(</span></span>
<span class="giallo-l"><span class="z-support z-constant"> circle farthest-corner</span><span class="z-keyword"> at</span><span class="z-support z-constant"> center</span><span>,</span></span>
<span class="giallo-l"><span class="z-support z-constant"> currentColor</span><span>,</span></span>
<span class="giallo-l"><span class="z-support z-constant z-support"> currentColor var</span><span>(</span><span class="z-variable">--ripple-size</span><span>),</span></span>
<span class="giallo-l"><span class="z-support z-constant z-support"> transparent var</span><span>(</span><span class="z-variable">--ripple-size</span><span>),</span></span>
<span class="giallo-l"><span class="z-support z-constant z-constant"> transparent 100</span><span class="z-keyword">%</span></span>
<span class="giallo-l"><span> );</span></span>
<span class="giallo-l"><span class="z-support"> opacity</span><span>:</span><span class="z-constant"> 0</span><span>;</span></span>
<span class="giallo-l"><span class="z-support"> transition</span><span>: opacity </span><span class="z-constant">0.5</span><span class="z-keyword">s</span><span class="z-support z-constant"> ease-out</span><span>, --ripple-size </span><span class="z-constant">0.5</span><span class="z-keyword">s</span><span class="z-support z-constant"> ease-out</span><span>;</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span> &</span><span class="z-entity">:active::after</span><span> {</span></span>
<span class="giallo-l"><span class="z-support"> opacity</span><span>:</span><span class="z-constant"> 0.15</span><span>;</span></span>
<span class="giallo-l"><span class="z-variable"> --ripple-size</span><span>:</span><span class="z-constant"> 100</span><span class="z-keyword">%</span><span>;</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span>}</span></span></code></pre><div>
<button class="demo-button">Button</button>
<button class="demo-button primary">Primary</button>
<button class="demo-button black">Dark</button>
<style>
@scope {
@property --ripple-size-100 {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
.demo-button {
position: relative;
}
.demo-button::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
background: radial-gradient(
circle farthest-corner at center,
currentColor,
currentColor var(--ripple-size-100),
transparent var(--ripple-size-100),
transparent 100%
);
transition: opacity 0.5s ease-out, --ripple-size-100 0.5s ease-out;
}
.demo-button:active::after {
opacity: 0.15;
--ripple-size-100: 100%;
}
}
</style>
</div>
</figure>
<p>Well, this is the point where the pure-CSS solution ends, and I had to get a little help from JavaScript.</p>
<p>Currently, when you release the button, the ripple declines again before vanishing.
This is not what Material does and not what I want though.<br />
I'd like it to continue expanding while slowly fading out.</p>
<p>I played around a bit with CSS animations and combinations with transitions, but nothing really worked like I wanted to,
especially since animations and transitions don't pair nicely.
Transitions strictly transition between actually declared values
and will just ignore that a property was in the middle of an animation:</p>
<figure class="padded">
<pre class="giallo z-code"><code data-lang="css"><span class="giallo-l"><span class="z-keyword">@property</span><span> --ripple-size {</span></span>
<span class="giallo-l"><span> syntax: "<percentage</span><span class="z-keyword">></span><span>";</span></span>
<span class="giallo-l"><span> inherits: false;</span></span>
<span class="giallo-l"><span class="z-entity z-name z-tag"> initial-value</span><span>: 0%;</span></span>
<span class="giallo-l"><span>}</span></span>
<span class="giallo-l"><span class="z-entity z-name z-tag">button</span><span> {</span></span>
<span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> /* ... */</span></span>
<span class="giallo-l"><span> &::after {</span></span>
<span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> /* ... */</span></span>
<span class="giallo-l"><span> --ripple-size: </span><span class="z-constant">100</span><span class="z-keyword">%</span><span>;</span></span>
<span class="giallo-l"><span class="z-support"> transition</span><span>: opacity </span><span class="z-constant">3</span><span class="z-keyword">s</span><span class="z-support z-constant"> ease-out</span><span>, --ripple-size-100 </span><span class="z-constant">3</span><span class="z-keyword">s</span><span class="z-support z-constant"> ease-out</span><span>;</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span> &</span><span class="z-entity">:active::after</span><span> {</span></span>
<span class="giallo-l"><span class="z-support"> opacity</span><span>:</span><span class="z-constant"> 0.5</span><span>;</span></span>
<span class="giallo-l"><span class="z-support"> animation</span><span>:</span><span class="z-constant"> 3</span><span class="z-keyword">s</span><span class="z-support z-constant"> ease-out forwards</span><span> --ripple-expand;</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span>}</span></span>
<span class="giallo-l"><span class="z-keyword">@keyframes</span><span class="z-variable"> --ripple-expand</span><span> {</span></span>
<span class="giallo-l"><span class="z-entity"> from</span><span> {</span><span class="z-variable"> --ripple-size</span><span>:</span><span class="z-constant"> 0</span><span class="z-keyword">%</span><span> }</span></span>
<span class="giallo-l"><span class="z-entity"> to</span><span> {</span><span class="z-variable"> --ripple-size</span><span>:</span><span class="z-constant"> 100</span><span class="z-keyword">%</span><span> }</span></span>
<span class="giallo-l"><span>}</span></span></code></pre><div>
<button class="demo-button">Button</button>
<button class="demo-button primary">Primary</button>
<button class="demo-button black">Dark</button>
<style>
@scope {
@property --ripple-size-200 {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
.demo-button {
position: relative;
}
.demo-button::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
--ripple-size-200: 100%;
background: radial-gradient(
circle farthest-corner at center,
currentColor,
currentColor var(--ripple-size-200),
transparent var(--ripple-size-200),
transparent 100%
);
transition: opacity 3s ease-out, --ripple-size-200 3s ease-out;
}
.demo-button:active::after {
opacity: 0.5;
animation: 3s ease-out forwards --ripple-expand;
}
@keyframes --ripple-expand {
from { --ripple-size-200: 0%; }
to { --ripple-size-200: 100%; }
}
}
</style>
</div>
<figcaption><p>An attempt with a combination of transition and animation.
I increased the opacity and transition/animation duration so the snapping when releasing early is more noticeable.</p>
</figcaption>
</figure>
<p>So, JavaScript to the rescue.<br />
With a little event handler that adds and removes a class that resets the sizes, this looks pretty nice already.</p>
<figure class="padded">
<pre class="giallo z-code"><code data-lang="css"><span class="giallo-l"><span class="z-entity">.ripple</span><span> {</span></span>
<span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> /* ... */</span></span>
<span class="giallo-l"><span> &::after {</span></span>
<span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> /* ... */</span></span>
<span class="giallo-l"><span> --ripple-size: </span><span class="z-constant">100</span><span class="z-keyword">%</span><span>;</span></span>
<span class="giallo-l"><span class="z-support"> opacity</span><span>:</span><span class="z-constant"> 0</span><span>;</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span> &</span><span class="z-entity">:active::after</span><span> {</span></span>
<span class="giallo-l"><span class="z-support"> opacity</span><span>:</span><span class="z-constant"> 0.15</span><span>;</span></span>
<span class="giallo-l"><span class="z-variable"> --ripple-size</span><span>:</span><span class="z-constant"> 100</span><span class="z-keyword">%</span><span>;</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span> &</span><span class="z-entity">.ripple-start::after</span><span> {</span></span>
<span class="giallo-l"><span class="z-variable"> --ripple-size</span><span>:</span><span class="z-constant"> 0</span><span class="z-keyword">%</span><span>;</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span>}</span></span></code></pre><pre class="giallo z-code"><code data-lang="javascript"><span class="giallo-l"><span class="z-variable z-other">document.</span><span class="z-entity z-name">addEventListener</span><span>(</span><span class="z-punctuation z-definition z-string z-string">'pointerdown'</span><span>, (</span><span class="z-variable">event</span><span>)</span><span class="z-storage z-type"> =></span><span> {</span></span>
<span class="giallo-l"><span class="z-keyword"> if</span><span class="z-variable z-other"> (event.target.classList.</span><span class="z-entity z-name">contains</span><span>(</span><span class="z-punctuation z-definition z-string z-string">"ripple"</span><span>)) {</span></span>
<span class="giallo-l"><span class="z-variable z-other"> event.target.classList.</span><span class="z-entity z-name">add</span><span>(</span><span class="z-punctuation z-definition z-string z-string">"ripple-start"</span><span>);</span></span>
<span class="giallo-l"><span class="z-entity z-name"> setTimeout</span><span>(()</span><span class="z-storage z-type"> =></span><span class="z-variable z-other"> event.target.classList.</span><span class="z-entity z-name">remove</span><span>(</span><span class="z-punctuation z-definition z-string z-string">"ripple-start"</span><span>),</span><span class="z-constant"> 10</span><span>);</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span>})</span></span></code></pre><div id="demo-300">
<button class="demo-button">Button</button>
<button class="demo-button primary">Primary</button>
<button class="demo-button black">Dark</button>
<style>
@scope {
@property --ripple-size-300 {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
.demo-button {
position: relative;
}
.demo-button::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
--ripple-size-300: 100%;
background: radial-gradient(
circle farthest-corner at center,
currentColor,
currentColor var(--ripple-size-300),
transparent var(--ripple-size-300),
transparent 100%
);
transition: opacity 0.5s ease-out, --ripple-size-300 0.5s ease-out;
}
.demo-button:active::after {
opacity: 0.15;
--ripple-size-300: 100%;
}
.demo-button.ripple-start::after {
transition: none;
--ripple-size-300: 0%;
}
}
</style>
<script>
document.getElementById('demo-300').addEventListener('pointerdown', (event) => {
if (event.target.classList.contains("demo-button")) {
event.target.classList.add("ripple-start");
setTimeout(() => event.target.classList.remove("ripple-start"), 10);
}
})
</script>
</div>
<figcaption><p>Even on quick releases, the ripple now expands outwards.</p>
</figcaption>
</figure><h2 id="positioning-the-ripple">Positioning the ripple</h2>
<p>We're still missing one of the arguably nicest visual cues. The ripple should expand from where the user has clicked.</p>
<p>For this a little JavaScript is needed anyway, so I'm not feeling too bad for the little <code>.ripple-start</code> hack above.</p>
<p>All that is needed is a few more custom properties as a way for JavaScript to pass the click position to CSS.</p>
<figure class="padded">
<pre class="giallo z-code"><code data-lang="css"><span class="giallo-l"><span class="z-entity">.ripple</span><span> {</span></span>
<span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> /* ... */</span></span>
<span class="giallo-l"><span> &::after {</span></span>
<span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> /* ... */</span></span>
<span class="giallo-l"><span class="z-invalid z-deprecated"> background</span><span>: </span><span class="z-support">radial-gradient</span><span>(</span></span>
<span class="giallo-l"><span class="z-support z-constant"> circle farthest-corner</span><span class="z-keyword"> at</span><span class="z-support"> var</span><span>(</span><span class="z-variable">--ripple-x</span><span>,</span><span class="z-constant"> 0</span><span>)</span><span class="z-support"> var</span><span>(</span><span class="z-variable">--ripple-y</span><span>,</span><span class="z-constant"> 0</span><span>),</span></span>
<span class="giallo-l"><span class="z-support z-constant"> currentColor</span><span>,</span></span>
<span class="giallo-l"><span class="z-support z-constant z-support"> currentColor var</span><span>(</span><span class="z-variable">--ripple-size</span><span>),</span></span>
<span class="giallo-l"><span class="z-support z-constant z-support"> transparent var</span><span>(</span><span class="z-variable">--ripple-size</span><span>),</span></span>
<span class="giallo-l"><span class="z-support z-constant z-constant"> transparent 100</span><span class="z-keyword">%</span></span>
<span class="giallo-l"><span> );</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span class="z-punctuation z-definition z-comment z-comment"> /* ... */</span></span>
<span class="giallo-l"><span>}</span></span></code></pre><pre class="giallo z-code"><code data-lang="javascript"><span class="giallo-l"><span class="z-variable z-other">document.</span><span class="z-entity z-name">addEventListener</span><span>(</span><span class="z-punctuation z-definition z-string z-string">'pointerdown'</span><span>, (</span><span class="z-variable">event</span><span>)</span><span class="z-storage z-type"> =></span><span> {</span></span>
<span class="giallo-l"><span class="z-keyword"> if</span><span class="z-variable z-other"> (event.target.classList.</span><span class="z-entity z-name">contains</span><span>(</span><span class="z-punctuation z-definition z-string z-string">"ripple"</span><span>)) {</span></span>
<span class="giallo-l"><span class="z-variable z-other"> event.target.style.</span><span class="z-entity z-name">setProperty</span><span>(</span><span class="z-punctuation z-definition z-string z-string">"--ripple-x"</span><span>,</span><span class="z-punctuation z-definition z-string z-string"> `${</span><span class="z-variable z-other">event</span><span class="z-string">.</span><span class="z-variable z-other">offsetX</span><span class="z-string z-punctuation z-definition z-string">}px`</span><span>);</span></span>
<span class="giallo-l"><span class="z-variable z-other"> event.target.style.</span><span class="z-entity z-name">setProperty</span><span>(</span><span class="z-punctuation z-definition z-string z-string">"--ripple-y"</span><span>,</span><span class="z-punctuation z-definition z-string z-string"> `${</span><span class="z-variable z-other">event</span><span class="z-string">.</span><span class="z-variable z-other">offsetY</span><span class="z-string z-punctuation z-definition z-string">}px`</span><span>);</span></span>
<span class="giallo-l"><span class="z-variable z-other"> event.target.classList.</span><span class="z-entity z-name">add</span><span>(</span><span class="z-punctuation z-definition z-string z-string">"ripple-start"</span><span>);</span></span>
<span class="giallo-l"><span class="z-entity z-name"> setTimeout</span><span>(()</span><span class="z-storage z-type"> =></span><span class="z-variable z-other"> event.target.classList.</span><span class="z-entity z-name">remove</span><span>(</span><span class="z-punctuation z-definition z-string z-string">"ripple-start"</span><span>),</span><span class="z-constant"> 10</span><span>);</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span>})</span></span></code></pre><div id="demo-400">
<button class="demo-button">Button</button>
<button class="demo-button primary">Primary</button>
<button class="demo-button black">Dark</button>
<style>
@scope {
@property --ripple-size-400 {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
.demo-button {
position: relative;
}
.demo-button::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
--ripple-size-400: 100%;
background: radial-gradient(
circle farthest-corner at var(--ripple-x, 0) var(--ripple-y, 0),
currentColor,
currentColor var(--ripple-size-400),
transparent var(--ripple-size-400),
transparent 100%
);
transition: opacity 0.5s ease-out, --ripple-size-400 0.5s ease-out;
}
.demo-button:active::after {
opacity: 0.15;
--ripple-size-400: 100%;
}
.demo-button.ripple-start::after {
transition: none;
--ripple-size-400: 0%;
}
}
</style>
<script>
document.getElementById('demo-400').addEventListener('pointerdown', (event) => {
if (event.target.classList.contains("demo-button")) {
event.target.style.setProperty("--ripple-x", `${event.offsetX}px`);
event.target.style.setProperty("--ripple-y", `${event.offsetY}px`);
event.target.classList.add("ripple-start");
setTimeout(() => event.target.classList.remove("ripple-start"), 10);
}
})
</script>
</div>
</figure><h2 id="final-result">Final Result</h2>
<p>The <a rel="nofollow external" href="https://codepen.io/Siphalor/pen/ogYYrqE">codepen</a> includes some further minor adjustments such as a bouncy easing
for the opacity (<a rel="nofollow external" href="https://fwdtools.com/css-easing-generator">this is a nice tool for creating easings</a>) and a subtle
gradient inside the ripple.</p>
<p>I think the result is actually far better than the Material implementation, especially on large surfaces.</p>
<figure class="padded">
<div>
<button class="demo-button final-ripple">Button</button>
<button class="demo-button final-ripple primary">Primary</button>
<button class="demo-button final-ripple black">Dark</button>
<style>
@scope {
:scope {
display: flex;
flex-wrap: wrap;
gap: 1em;
& > * {
flex: 200px 1 1;
aspect-ratio: 1;
}
}
}
</style>
</div>
<figcaption><p>Some extra-large buttons as a treat :)</p>
</figcaption>
</figure><h2 id="ps">PS</h2>
<p>Hi, and thanks for reading.</p>
<p>This is the first blog post I've ever written, so this was also an exercise in writing and how to embed the buttons and
code blocks etc.</p>
<p>I hope you liked it :)</p>
<style>
@property --ripple-size-final {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@scope {
.demo-button {
padding: 0.5em 1em;
border: none;
border-radius: 0.5em;
--demo-button-bg: white;
--demo-button-color: black;
cursor: pointer;
background-color: var(--demo-button-bg);
color: var(--demo-button-color);
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
&:hover {
background-color: color-mix(in srgb, var(--demo-button-color) 10%, var(--demo-button-bg));
}
&:active {
background-color: color-mix(in srgb, var(--demo-button-color) 20%, var(--demo-button-bg));
}
&.primary {
--demo-button-bg: var(--primary);
}
&.black {
--demo-button-bg: black;
--demo-button-color: white;
}
&.final-ripple {
position: relative;
&::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
background: radial-gradient(
circle farthest-corner at var(--ripple-x, 0) var(--ripple-y, 0),
color-mix(currentColor, transparent 60%),
currentColor var(--ripple-size-final),
transparent var(--ripple-size-final),
transparent 100%
);
transition: opacity 0.6s linear, --ripple-size-final 0.5s ease-out;
}
&:active {
&::after {
transition: opacity 1s cubic-bezier(0.18, 3, 0.45, 0.82),
--ripple-size-final 0.5s ease-out;
opacity: 0.15;
--ripple-size-final: 100%;
}
}
&.ripple-start {
&::after {
transition: none;
--ripple-size-final: 0%;
}
}
}
}
}
</style>
<script>
document.addEventListener('pointerdown', (event) => {
if (event.target.classList.contains("final-ripple")) {
event.target.style.setProperty("--ripple-x", `${event.offsetX}px`);
event.target.style.setProperty("--ripple-y", `${event.offsetY}px`);
event.target.classList.add("ripple-start");
setTimeout(() => event.target.classList.remove("ripple-start"), 10);
}
})
</script>