1.animated-button {
2  position: relative;
3  display: inline-block;
4  padding: 16px 28px;
5  font-size: 20px;
6  font-weight: bold;
7  text-transform: uppercase;
8  color: #fff;
9  text-align: center;
10  text-decoration: none;
11  background-color: #1f347b;
12  /* border-radius: 40px; */
13  overflow: hidden;
14  border: none;
15  z-index: 1;
16}
17
18.animated-button:before {
19  transition: 1s;
20  content: "";
21  position: absolute;
22  top: 50%;
23  left: 50%;
24  width: 0;
25  height: 0;
26  background-color: #fff;
27  border-radius: 50%;
28  opacity: 0;
29  transform: translate(-50%, -50%);
30  z-index: -1;
31}
32
33.animated-button:hover:before {
34  width: 300px;
35  height: 300px;
36  opacity: 0.4;
37  transition: all 0.5s ease-out;
38}
39
40.animated-button:hover {
41  background-color: #fff;
42  color: #202960;
43  transition: all 0.5s ease-out;
44}
45
46.animated-button:hover:after {
47  content: "";
48  position: absolute;
49  top: 50%;
50  left: 50%;
51  width: 0;
52  height: 0;
53  background-color: #255ea4;
54  border-radius: 50%;
55  transform: translate(-50%, -50%);
56  z-index: -2;
57  animation: pulse 2s infinite;
58}
59
60@keyframes pulse {
61  0% {
62    width: 0;
63    height: 0;
64    opacity: 0.5;
65  }
66
67  100% {
68    width: 200px;
69    height: 200px;
70    opacity: 0;
71  }
72}
73