پیشنمایش زنده
کد HTML
<button class="btn">
<span>Border ripple</span>
<div class="ripple-container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</button>
کد CSS
/* Note the transparent background :) */
.btn {
border-radius: 0.5em;
font-size: larger;
height: 3em;
width: 8em;
position: relative;
border: none;
background-color: transparent;
isolation: isolate;
}
.btn > span {
position: relative;
pointer-events: none;
}
.ripple-container {
position: absolute;
inset: -0.3em;
display: grid;
grid-template-columns: repeat(16, 0.5em);
border-radius: 0.8em;
padding: 0.3em;
mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
/* I forgor that I need the two mask composites because of firefoxxxxxx */
mask-composite: exclude;
mask-composite: xor;
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: exclude;
-webkit-mask-composite: xor;
overflow: hidden;
}
.ripple-container > span {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.ripple-container > span::after {
content: "";
pointer-events: none;
position: absolute;
background-color: hsl(218, 68%, 65%);
transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s;
width: 18em;
height: 18em;
opacity: 0;
border-radius: 999em;
}
.ripple-container > span:active::after {
transition: 0s;
width: 0em;
height: 0em;
opacity: 1;
}
.ripple-container::before {
content: "";
pointer-events: none;
position: absolute;
background-color: hsla(218, 68%, 65%, 0.5);
width: 13em;
height: 13em;
border-radius: 999em;
transition: transform 0.25s ease-out;
transform: translate(-25%, -25%) scale(0);
}
.ripple-container:hover::before {
transform: translate(-25%, -25%) scale(1);
}