Button by mRcOol7

1.button {
2  position: relative;
3  display: flex;
4  align-items: center;
5  padding: 0.75rem 1.5rem;
6  background: linear-gradient(to right, #3b82f6, #9333ea);
7  border: none;
8  border-radius: 9999px;
9  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
10  color: white;
11  cursor: pointer;
12  overflow: hidden;
13  transition: all 0.3s ease-in-out;
14}
15
16.button:hover {
17  transform: scale(1.05);
18  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
19}
20
21.button:active {
22  transform: scale(0.95);
23}
24
25.button:focus {
26  outline: none;
27  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
28}
29
30.button svg {
31  width: 3rem;
32  height: 3rem;
33  margin-right: 0.5rem;
34  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
35}
36
37.button:hover svg {
38  transform: rotate(20deg) scale(1.1);
39  filter: drop-shadow(0 0 10px #ffd700);
40}
41
42.button span {
43  font-size: 1.125rem;
44  font-weight: 600;
45  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out,
46    text-shadow 0.3s ease-in-out;
47}
48
49.button:hover span {
50  color: #ffd700;
51  text-shadow: 0 0 10px #ffd700;
52}
53
54.button .text-md {
55  font-size: 1rem;
56  margin-left: 0.5rem;
57  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out,
58    text-shadow 0.3s ease-in-out;
59}
60
61.button:hover .text-md {
62  color: #ffd700;
63  text-shadow: 0 0 10px #ffd700;
64}
65
66.ripple {
67  position: absolute;
68  border-radius: 50%;
69  background: rgba(255, 255, 255, 0.6);
70  animation: ripple 1s linear infinite;
71  pointer-events: none;
72}
73
74.button:active .ripple {
75  animation: ripple-on-click 0.6s linear;
76}
77
78@keyframes ripple {
79  0% {
80    transform: scale(0);
81    opacity: 1;
82  }
83  100% {
84    transform: scale(4);
85    opacity: 0;
86  }
87}
88
89@keyframes ripple-on-click {
90  0% {
91    transform: scale(0);
92    opacity: 1;
93  }
94  100% {
95    transform: scale(4);
96    opacity: 0;
97  }
98}
99