1.my-button {
2  background-color: blueviolet;
3  border: none;
4  color: white;
5  padding: 10px 20px;
6  text-align: center;
7  text-decoration: none;
8  display: inline-block;
9  font-size: 16px;
10  border-radius: 5px;
11  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
12  position: relative;
13  overflow: hidden;
14}
15
16.my-button:after {
17  content: "";
18  background-color: rgba(255, 255, 255, 0.2);
19  position: absolute;
20  top: 50%;
21  left: 50%;
22  width: 5px;
23  height: 5px;
24  border-radius: 50%;
25  transform: translate(-50%, -50%);
26  opacity: 0;
27}
28
29.my-button:hover:after {
30  animation: ripple_401 1s ease-out;
31}
32
33@keyframes ripple_401 {
34  0% {
35    width: 5px;
36    height: 5px;
37    opacity: 1;
38  }
39
40  100% {
41    width: 200px;
42    height: 200px;
43    opacity: 0;
44  }
45}
46