Button by elijahwgummer-poc

1.button {
2  position: relative;
3  display: inline-block;
4  padding: 12px 24px;
5  border: none;
6  outline: none;
7  border-radius: 50px;
8  background-color: #F06C9B;
9  color: #fff;
10  font-size: 16px;
11  font-weight: bold;
12  cursor: pointer;
13  overflow: hidden;
14  transition: background-color 0.3s ease;
15}
16
17.button:hover {
18  background-color: #F26D5F;
19}
20
21.button .text {
22  position: relative;
23  z-index: 2;
24}
25
26.circle-container {
27  position: absolute;
28  top: 0;
29  left: 0;
30  width: 100%;
31  height: 100%;
32  overflow: hidden;
33}
34
35.circle {
36  position: absolute;
37  top: 50%;
38  left: 50%;
39  transform: translate(-50%, -50%);
40  width: 0;
41  height: 0;
42  background-color: #FAD779;
43  border-radius: 50%;
44  opacity: 0.5;
45  transition: all 0.5s ease;
46}
47
48.button:hover .circle {
49  width: 200%;
50  height: 200%;
51  transform: translate(-50%, -50%) scale(1);
52  opacity: 0;
53}
54
55.button:focus {
56  box-shadow: 0 0 0 2px #FF8D55;
57  outline: none;
58}
59
60.button.animated .circle {
61  animation: pulse 1s infinite;
62}
63
64@keyframes pulse {
65  0% {
66    box-shadow: 0 0 0 0 rgba(250, 215, 121, 0.4);
67  }
68
69  70% {
70    box-shadow: 0 0 0 10px rgba(250, 215, 121, 0);
71  }
72
73  100% {
74    box-shadow: 0 0 0 0 rgba(250, 215, 121, 0);
75  }
76}
77