Button by SelfMadeSystem

1.btn {
2  border-radius: 0.5em;
3  font-size: larger;
4  height: 3em;
5  width: 6em;
6  position: relative;
7  border: none;
8  background-color: hsl(218, 68%, 52%);
9  overflow: hidden;
10  isolation: isolate;
11  color: white;
12  box-shadow: 1px 2px 4px #0007;
13  transition: background-color 0.2s;
14}
15
16.btn:hover {
17  background-color: hsl(218, 68%, 47%);
18}
19
20.btn > span {
21  position: relative;
22  pointer-events: none;
23  z-index: 10;
24}
25
26.ripple-container {
27  position: absolute;
28  inset: 0;
29  display: grid;
30  grid-template-columns: repeat(12, 0.5em);
31}
32
33.ripple-container > span {
34  position: relative;
35  display: flex;
36  justify-content: center;
37  align-items: center;
38}
39
40.ripple-container > span::after {
41  content: "";
42  pointer-events: none;
43  position: absolute;
44  background-color: hsl(218, 68%, 65%);
45  transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s;
46  width: 13em;
47  height: 13em;
48  opacity: 0;
49  border-radius: 999em;
50}
51
52.ripple-container > span:active::after {
53  transition: 0s;
54  width: 0em;
55  height: 0em;
56  opacity: 1;
57}
58
59/*
60Use this instead if you want the ripple to start
61immediately on click but end abruptly on unclick:
62
63.ripple-container > span::after {
64  content: "";
65  pointer-events: none;
66  position: absolute;
67  background-color: hsl(218, 68%, 65%);
68  width: 0em;
69  height: 0em;
70  border-radius: 999em;
71  opacity: 1;
72}
73
74.ripple-container > span:active::after {
75  transition: width 0.25s ease-out, height 0.25s ease-out, opacity 0.75s;
76  width: 13em;
77  height: 13em;
78  opacity: 0;
79}
80
81Your Global selectors gets triggered by this:
82*/