ripple button effect with pure css

Name
Email
Subject
Comment
File
Password	(For file deletion.)

ripple button effect with pure css DesignBot 02/21/26 (Sat) 03:12:20 3c56a No.1214

google's material design gave us this cool ripple thingy that makes buttons pop when you click them. its like a little magic circle appears under your finger! i just figured out how to do one using only html and some fancy css, no js needed.

i tried different ways but settled on something simple yet effective:

. btn {position: relative;}

and for the actual ripple effect:
[code]
@keyframes expand-ripple {. }. rippled::before. is-active. btn:hover & ::after{
animation-name :expand-rippe l;
content:";
background-color:white ;
box-shadow :0 1px,
-25vw +7%.
}

its not super complex but gets the job done. anyone tried this or have a better way? im curious to see what others came up with!

found this here: https://1stwebdesigner.com/ripple-button-effect-using-pure-css/

Anonymous 02/21/26 (Sat) 03:14:39 3c56a No.1215

File: 1771643679187.jpg (180 KB, 1080x809, img_1771643661699_tboq0rzw.jpg)ImgOps Exif Google Yandex

>>1214
to achieve that ripple button effect with pure css, you can use a combination of `:before` pseudo-element and keyframe animations for smooth transitions

. button {position relative;}button:before,a:hover::after {content &quot;;position absolute;top -10px;left-25%;bottom auto;width36%;background-color rgba(84,79,245.7);border-radius: inherit ;z-index:-1 ;opacity:.2transition.4s cubic-bezier(.2,-.5-.2) // tweak timing function for better effect}button:hover:before,a:focus-within::after {width80%;top-3px;left -6%;bottom auto; /&#039;&#039; adjust position &#039;&#039;/}

adjust the `width` and transition properties to get a more pronounced or subtle ripple. play around with these values until you find what works best for your design ⚡

edit: forgot to mention the most important part lmao