1.complex-animated-button {
2  --primary-color: #ff7f50;
3  --secondary-color: #ffa07a;
4  --border-radius: 8px;
5  --shadow-color: rgba(0, 0, 0, 0.2);
6  --shadow-offset: 2px;
7  --shadow-blur: 4px;
8  --ripple-color: rgba(255, 255, 255, 0.5);
9  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
10  border: none;
11  border-radius: var(--border-radius);
12  color: white;
13  font-size: 1.2rem;
14  padding: 1rem 2rem;
15  position: relative;
16  overflow: hidden;
17  cursor: pointer;
18  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-color);
19  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
20}
21
22.complex-animated-button:hover {
23  transform: scale(1);
24  background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
25}
26
27.complex-animated-button:focus {
28  outline: none;
29}
30
31.complex-animated-button:active {
32  animation: ripple 0.6s ease-out;
33}
34
35@keyframes ripple {
36  to {
37    transform: scale(1);
38    opacity: 0;
39  }
40}
41
42.complex-animated-button::after {
43  content: '';
44  position: absolute;
45  top: 50%;
46  left: 50%;
47  transform: translate(-50%, -50%);
48  width: 0;
49  height: 0;
50  background-color: var(--ripple-color);
51  border-radius: 50%;
52  opacity: 0.5;
53}
54
55.complex-animated-button:active::after {
56  width: 100%;
57  height: 100%;
58  transition: width 0.3s ease-out, height 0.3s ease-out;
59}
60