Button by reyvaxreecded

1button {
2  all: unset;
3  position: relative;
4  width: 10em;
5  height: 10em;
6  border-radius: 100%;
7  display: -webkit-box;
8  display: -ms-flexbox;
9  display: flex;
10  -webkit-box-pack: center;
11  -ms-flex-pack: center;
12  justify-content: center;
13  -webkit-box-align: center;
14  -ms-flex-align: center;
15  align-items: center;
16  overflow: visible;
17}
18
19button>span>svg {
20  width: 8.5em;
21  height: 8.5em;
22}
23
24button>span {
25  position: relative;
26  -webkit-box-sizing: border-box;
27  box-sizing: border-box;
28  display: -webkit-box;
29  display: -ms-flexbox;
30  display: flex;
31  -webkit-box-pack: center;
32  -ms-flex-pack: center;
33  justify-content: center;
34  -webkit-box-align: center;
35  -ms-flex-align: center;
36  align-items: center;
37}
38
39button:before {
40  content: '';
41  display: block;
42  position: absolute;
43  top: 0;
44  left: 0;
45  z-index: -1;
46  background: radial-gradient(circle, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0) 100%);
47  width: 100%;
48  height: 100%;
49  border-radius: 100%;
50  -webkit-animation: pulse 1s ease-in-out infinite;
51  animation: pulse 1s ease-in-out infinite;
52  -webkit-transition: all 0.15s ease-in;
53  transition: all 0.15s ease-in;
54}
55
56button>span {
57  overflow: hidden;
58  -webkit-clip-path: circle(50% at 50% 50%);
59  clip-path: circle(50% at 50% 50%);
60  -webkit-transition: -webkit-transform 0.15s ease-in;
61  transition: -webkit-transform 0.15s ease-in;
62  transition: transform 0.15s ease-in;
63  transition: transform 0.15s ease-in, -webkit-transform 0.15s ease-in;
64}
65
66button > span:after {
67  content: '';
68  -webkit-clip-path: circle(50% at 50% 50%);
69  clip-path: circle(50% at 50% 50%);
70  width: 94.5%;
71  height: 94.5%;
72  position: absolute;
73  top: 0.27em;
74  z-index: 2;
75  background-color: #00000000;
76  border-radius: 100%;
77  background: radial-gradient(circle, rgba(254,123,0,0.52) 0%, rgba(191,0,0,0.9612219887955182) 100%);
78  -webkit-transition: all 0.25s ease-in;
79  transition: all 0.25s ease-in;
80  background-clip: content-box;
81  opacity: 0;
82}
83
84button > span:before {
85  content: '';
86  -webkit-clip-path: circle(50% at 50% 50%);
87  clip-path: circle(50% at 50% 50%);
88  width: 94.5%;
89  height: 94.5%;
90  position: absolute;
91  top: 0.27em;
92  z-index: 2;
93  background-color: #00000000;
94  border-radius: 100%;
95  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,222,0,1) 50%, rgba(255,0,0,0.9612219887955182) 100%);
96  background-clip: content-box;
97  opacity: 0;
98}
99
100button:hover >span:after {
101  opacity: 0.65;
102}
103
104button:active > span > svg {
105  -webkit-transform: scale(0);
106  -ms-transform: scale(0);
107  transform: scale(0);
108}
109
110button:active > span:before {
111  -webkit-animation: implose 0.33s ease-in-out;
112  animation: implose 0.33s ease-in-out;
113  -webkit-animation-fill-mode: backwards;
114  animation-fill-mode: backwards;
115}
116
117button:active > span:after {
118  display: none;
119}
120
121button:active:before {
122  display: none;
123}
124
125@-webkit-keyframes pulse {
126  0% {
127    -webkit-transform: scale(0.95);
128    transform: scale(0.95);
129  }
130
131  50% {
132    -webkit-transform: scale(1);
133    transform: scale(1);
134  }
135
136  100% {
137    -webkit-transform: scale(0.95);
138    transform: scale(0.95);
139  }
140}
141
142@keyframes pulse {
143  0% {
144    -webkit-transform: scale(0.95);
145    transform: scale(0.95);
146  }
147
148  50% {
149    -webkit-transform: scale(1);
150    transform: scale(1);
151  }
152
153  100% {
154    -webkit-transform: scale(0.95);
155    transform: scale(0.95);
156  }
157}
158
159@-webkit-keyframes implose {
160  0% {
161    -webkit-transform: scaleY(1);
162    transform: scaleY(1);
163    opacity: 0.5;
164  }
165
166  50% {
167    -webkit-transform: scaleY(0);
168    transform: scaleY(0);
169    opacity: 0.75;
170  }
171
172  100% {
173    -webkit-transform: scaleY(0.5);
174    transform: scaleY(0.5);
175    -webkit-transform: scaleX(0);
176    transform: scaleX(0);
177    opacity: 1;
178  }
179}
180
181@keyframes implose {
182  0% {
183    -webkit-transform: scaleY(1);
184    transform: scaleY(1);
185    opacity: 0.5;
186  }
187
188  50% {
189    -webkit-transform: scaleY(0);
190    transform: scaleY(0);
191    opacity: 0.75;
192  }
193
194  100% {
195    -webkit-transform: scaleY(0.5);
196    transform: scaleY(0.5);
197    -webkit-transform: scaleX(0);
198    transform: scaleX(0);
199    opacity: 1;
200  }
201}