1button {
2  --min-width: 180px;
3  --min-height: 42px;
4  --ring-min-size: 20px;
5  --ring-max-size: 150px;
6  --ring-width: 3px;
7  --main-bg-color: #814fd1;
8  --gradient-bg-color-1: rgb(222, 203, 226);
9  --gradient-bg-color-2: rgb(79, 131, 209);
10  --ring-color: #6f00ff;
11  --shadow-color: rgba(79, 99, 209, 0.64);
12  --hover-shadow-color: rgba(79, 99, 209, 0.64);
13  --main-fg-color: #313133;
14  --hover-fg-color: rgb(38, 11, 53);
15  min-width: var(--min-width);
16  min-height: var(--min-height);
17  font-size: 17px;
18  text-transform: uppercase;
19  font-weight: 600;
20  color: var(--main-fg-color);
21  background: var(--main-bg-color);
22  background: linear-gradient(66deg, var(--gradient-bg-color-1) 0%, var(--gradient-bg-color-2) 100%);
23  border: none;
24  border-radius: 999px;
25  box-shadow: 12px 2px 24px var(--shadow-color);
26  transition: all 0.3s ease-in-out 0s;
27  cursor: pointer;
28  outline: none;
29  position: relative;
30  padding: 10px;
31}
32
33button::before {
34  content: '';
35  border-radius: 999px;
36  min-width: calc(var(--min-width) + 12px);
37  min-height: calc(var(--min-height) + 12px);
38  border: var(--ring-width) solid var(--ring-color);
39  box-shadow: 0 0 60px var(--hover-shadow-color);
40  position: absolute;
41  top: 50%;
42  left: 50%;
43  transform: translate(-50%, -50%);
44  opacity: 0;
45  transition: all .3s ease-in-out 0s;
46}
47
48button:hover, .button:focus {
49  color: var(--hover-fg-color);
50  transform: translateY(-6px);
51}
52
53button:active {
54  color: var(--main-fg-color);
55  transform: scale(0.95);
56}
57
58button:active::before {
59  border: 0px solid var(--ring-color);
60}
61
62button:hover::before, button:focus::before {
63  opacity: 1;
64}
65
66/* ring */
67button::after {
68  content: '';
69  width: var(--ring-min-size);
70  height: var(--ring-min-size);
71  border-radius: 100%;
72  border: var(--ring-width) solid var(--ring-color);
73  position: absolute;
74  z-index: -1;
75  top: 50%;
76  left: 50%;
77  transform: translate(-50%, -50%);
78  animation: ring 1.5s infinite;
79}
80
81button:hover::after, button:focus::after {
82  animation: none;
83  display: none;
84}
85
86@keyframes ring {
87  0% {
88    width: var(--ring-min-size);
89    height: var(--ring-min-size);
90    opacity: 0.5;
91  }
92
93  100% {
94    width: var(--ring-max-size);
95    height: var(--ring-max-size);
96    opacity: 0;
97  }
98}