<button
class
=
"btn ripple-btn"
style
=
"
background-color
:
#0d6efd;
color
:
#ffffff;
font-size
:
16px;
border-radius
:
4px;
padding
:
12px 18px;
"
>
Button
</button
>
.ripple-btn
{
position
:
relative;
overflow
:
hidden;
}
.ripple
{
position
:
absolute;
border-radius
:
50%;
transform
:
scale
(0)
;
pointer-events
:
none;
background-color
:
#000000;
opacity
:
0.6;
animation
:
ripple 600ms ease-in-out;
}
@keyframes
ripple
{
to
{
transform
:
scale
(2)
;
opacity
:
0;
}
}
const
btn
=
document.
querySelector
(
'.ripple-btn'
)
;
btn.
addEventListener
(
'click'
,
function
(
e
)
{
const
rect
=
this
.
getBoundingClientRect
(
)
;
const
span
=
document.
createElement
(
'span'
)
;
const
d
=
Math.
max
(rect.width,
rect.height)
*
2
;
span.classList.
add
(
'ripple'
)
;
span.style.width
=
span.style.height
=
d
+
'px'
;
span.style.left
=
(e.clientX
-
rect.left
-
d/
2
)
+
'px'
;
span.style.top
=
(e.clientY
-
rect.top
-
d/
2
)
+
'px'
;
this
.
appendChild
(span)
;
span.
addEventListener
(
'animationend'
,
(
)
=>
span.
remove
(
)
)
;
}
)
;