1.beautiful-button {
2  position: relative;
3  display: inline-block;
4  background: linear-gradient(to bottom, #1b1c3f, #4a4e91);
5 /* Gradient background */
6  color: white;
7 /* White text color */
8  font-family: "Segoe UI", sans-serif;
9 /* Stylish and legible font */
10  font-weight: bold;
11  font-size: 18px;
12 /* Large font size */
13  border: none;
14 /* No border */
15  border-radius: 30px;
16 /* Rounded corners */
17  padding: 14px 28px;
18 /* Large padding */
19  cursor: pointer;
20 /* Cursor on hover */
21  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
22 /* Subtle shadow */
23  animation: button-shimmer 2s infinite;
24  transition: all 0.3s ease-in-out;
25 /* Smooth transition */
26}
27
28/* Hover animation */
29.beautiful-button:hover {
30  background: linear-gradient(to bottom, #2c2f63, #5b67b7);
31  animation: button-particles 1s ease-in-out infinite;
32  transform: translateY(-2px);
33}
34
35/* Click animation */
36.beautiful-button:active {
37  transform: scale(0.95);
38  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
39}
40
41/* Shimmer animation */
42@keyframes button-shimmer {
43  0% {
44    background-position: left top;
45  }
46
47  100% {
48    background-position: right bottom;
49  }
50}
51
52/* Particle animation */
53@keyframes button-particles {
54  0% {
55    background-position: left top;
56  }
57
58  100% {
59    background-position: right bottom;
60  }
61}