├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Animation-button
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Glowing Button
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | margin: 0;
7 | background-color: #161616;
8 | overflow: hidden;
9 | }
10 | .btn {
11 | position: relative;
12 | margin: 100px;
13 | padding: 15px 40px;
14 | border: none;
15 | outline: none;
16 | color: #fff;
17 | cursor: pointer;
18 | z-index: 0;
19 | border-radius: 12px;
20 | font-size: 18px;
21 | }
22 | .btn::after {
23 | content: "";
24 | position: absolute;
25 | width: 100%;
26 | height: 100%;
27 | background-color: #333;
28 | top: 0;
29 | left: 0;
30 | border-radius: 12px;
31 | z-index: -1;
32 | }
33 | .btn::before {
34 | content: "";
35 | position: absolute;
36 | top: -2px;
37 | left: -2px;
38 | width: calc(100% + 4px);
39 | height: calc(100% + 4px);
40 | background: linear-gradient(
41 | 45deg,
42 | #ff0000,
43 | #ff7300,
44 | #fffb00,
45 | #48ff00,
46 | #00ffd5,
47 | #002bff,
48 | #7a00ff,
49 | #ff00c8,
50 | #ff0000
51 | );
52 | background-size: 600%;
53 | filter: blur(8px);
54 | border-radius: 12px;
55 | opacity: 0;
56 | z-index: -2;
57 | animation: glowing 20s linear infinite;
58 | transition: opacity 0.3s ease-in-out;
59 | }
60 | @keyframes glowing {
61 | 0% { background-position: 0 0; }
62 | 50% { background-position: 400% 0; }
63 | 100% { background-position: 0 0; }
64 | }
65 | .btn:hover::before {
66 | opacity: 1;
67 | }
68 | .btn:active::after {
69 | background: transparent;
70 | }
71 | .btn:active {
72 | color: #000;
73 | font-weight: bold;
74 | }
75 |
--------------------------------------------------------------------------------