1.animated-button {
2  position: relative;
3  display: inline-block;
4  padding: 12px 24px;
5  border: none;
6  font-size: 16px;
7  background-color: inherit;
8  border-radius: 100px;
9  font-weight: 600;
10  color: #ffffff40;
11  box-shadow: 0 0 0 2px #ffffff20;
12  cursor: pointer;
13  overflow: hidden;
14  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
15}
16
17.animated-button span:last-child {
18  position: absolute;
19  top: 50%;
20  left: 50%;
21  transform: translate(-50%, -50%);
22  width: 20px;
23  height: 20px;
24  background-color: #2196F3;
25  border-radius: 50%;
26  opacity: 0;
27  transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
28}
29
30.animated-button span:first-child {
31  position: relative;
32  z-index: 1;
33}
34
35.animated-button:hover {
36  box-shadow: 0 0 0 5px #2195f360;
37  color: #ffffff;
38}
39
40.animated-button:active {
41  scale: 0.95;
42}
43
44.animated-button:hover span:last-child {
45  width: 150px;
46  height: 150px;
47  opacity: 1;
48}
49
50
51