├── index.html
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Neon Button Animation
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Neon button
15 |
16 |
17 |
18 |
19 |
20 |
21 | Neon button
22 |
23 |
24 |
25 |
26 |
27 |
28 | Neon button
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap");
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | body {
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | height: 100vh;
14 | background: #050801;
15 | font-family: "Raleway", sans-serif;
16 | font-weight: bold;
17 | }
18 |
19 | a {
20 | position: relative;
21 | display: inline-block;
22 | padding: 25px 30px;
23 | margin: 40px 0;
24 | color: #03e9f4;
25 | text-decoration: none;
26 | text-transform: uppercase;
27 | transition: 0.5s;
28 | letter-spacing: 4px;
29 | overflow: hidden;
30 | margin-right: 50px;
31 | }
32 |
33 | a:hover {
34 | background: #03e9f4;
35 | color: #050801;
36 | box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
37 | 0 0 200px #03e9f4;
38 | -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
39 | }
40 |
41 | a:nth-child(1) {
42 | filter: hue-rotate(270deg);
43 | }
44 |
45 | a:nth-child(2) {
46 | filter: hue-rotate(110deg);
47 | }
48 |
49 | a span {
50 | position: absolute;
51 | display: block;
52 | }
53 |
54 | a span:nth-child(1) {
55 | top: 0;
56 | left: 0;
57 | width: 100%;
58 | height: 2px;
59 | background: linear-gradient(90deg, transparent, #03e9f4);
60 | animation: animate1 1s linear infinite;
61 | }
62 |
63 | @keyframes animate1 {
64 | 0% {
65 | left: -100%;
66 | }
67 |
68 | 50%,
69 | 100% {
70 | left: 100%;
71 | }
72 | }
73 |
74 | a span:nth-child(2) {
75 | top: -100%;
76 | right: 0;
77 | width: 2px;
78 | height: 100%;
79 | background: linear-gradient(180deg, transparent, #03e9f4);
80 | animation: animate2 1s linear infinite;
81 | animation-delay: 0.25s;
82 | }
83 |
84 | @keyframes animate2 {
85 | 0% {
86 | top: -100%;
87 | }
88 |
89 | 50%,
90 | 100% {
91 | top: 100%;
92 | }
93 | }
94 |
95 | a span:nth-child(3) {
96 | bottom: 0;
97 | right: 0;
98 | width: 100%;
99 | height: 2px;
100 | background: linear-gradient(270deg, transparent, #03e9f4);
101 | animation: animate3 1s linear infinite;
102 | animation-delay: 0.5s;
103 | }
104 |
105 | @keyframes animate3 {
106 | 0% {
107 | right: -100%;
108 | }
109 |
110 | 50%,
111 | 100% {
112 | right: 100%;
113 | }
114 | }
115 |
116 | a span:nth-child(4) {
117 | bottom: -100%;
118 | left: 0;
119 | width: 2px;
120 | height: 100%;
121 | background: linear-gradient(360deg, transparent, #03e9f4);
122 | animation: animate4 1s linear infinite;
123 | animation-delay: 0.75s;
124 | }
125 |
126 | @keyframes animate4 {
127 | 0% {
128 | bottom: -100%;
129 | }
130 |
131 | 50%,
132 | 100% {
133 | bottom: 100%;
134 | }
135 | }
--------------------------------------------------------------------------------