1/* styles.css */
2
3/* Reset default styles for the button */
4button {
5  border: none;
6  outline: none;
7  padding: 10px 20px;
8  font-size: 16px;
9  border-radius: 4px;
10  cursor: pointer;
11  background-color: #4158D0;
12  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
13  color: #fff;
14  position: relative;
15  overflow: hidden;
16}
17
18/* Add a pseudo-element for the animation effect */
19button::before {
20  content: '';
21  position: absolute;
22  top: 0;
23  left: 50%;
24  width: 0;
25  height: 100%;
26  background-color: rgba(255, 255, 255, 0.2);
27  transform: translateX(-50%);
28  transition: width 0.3s ease;
29}
30
31/* Hover effect for the button */
32button:hover::before {
33  width: 100%;
34}
35
36/* Active effect for the button */
37button:active::before {
38  background-color: rgba(255, 255, 255, 0.4);
39  transition: none;
40  animation: ripple 0.4s ease;
41}
42
43/* Keyframes animation for the active effect */
44@keyframes ripple {
45  to {
46    transform: scale(2);
47    opacity: 0;
48  }
49}
50