Skip to content

Commit 5e3afe5

Browse files
tirtharajsinhatirtharajsinha
authored
Add files via upload
1 parent cf6ea8a commit 5e3afe5

File tree

2 files changed

+180
-0
lines changed

2 files changed

+180
-0
lines changed

‎neon-btn.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
*{
2+
margin:0;
3+
padding: 0;
4+
font-family: consolas;
5+
box-sizing: border-box;
6+
background-color: black;
7+
}
8+
9+
body{
10+
display:flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height: 100vh;
14+
flex-direction: column;
15+
16+
}
17+
18+
a{
19+
position: relative;
20+
display:inline-block;
21+
padding: 25px 30px;
22+
margin:40px 0;
23+
font-size: 24px;
24+
text-decoration: none;
25+
text-transform: uppercase;
26+
overflow: hidden;
27+
transition: .5s;
28+
letter-spacing: 4px;
29+
color:#03e9f4;
30+
/*-webkit-box-reflect:below 1px linear-gradient(transparent,#0005);*/
31+
}
32+
a:nth-child(1)
33+
{
34+
filter:hue-rotate(290deg);
35+
}
36+
a:nth-child(3)
37+
{
38+
filter:hue-rotate(110deg);
39+
}
40+
41+
42+
43+
a:hover{
44+
background: #03e9f4;
45+
color:#050801;
46+
box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4
47+
}
48+
a span{
49+
position: absolute;
50+
display: block;
51+
}
52+
a span:nth-child(1)
53+
{
54+
top: 0;
55+
left:0;
56+
width:100%;
57+
height: 2px;
58+
background: linear-gradient(90deg,transparent,#03e9f4);
59+
animation: animate1 1s linear infinite;
60+
61+
}
62+
63+
64+
@keyframes animate1 {
65+
66+
0%{
67+
left:-100%;
68+
}
69+
50%,100%{
70+
left:100%;
71+
}
72+
}
73+
74+
75+
a span:nth-child(2)
76+
{
77+
top: -100%;
78+
right:0;
79+
width:2px;
80+
height: 100%;
81+
background: linear-gradient(180deg,transparent,#03e9f4);
82+
animation: animate2 1s linear infinite;
83+
animation-delay: 0.25s;
84+
85+
}
86+
87+
88+
@keyframes animate2 {
89+
90+
0%{
91+
top:-100%;
92+
}
93+
50%,100%{
94+
top:100%;
95+
}
96+
}
97+
98+
99+
100+
101+
a span:nth-child(3)
102+
{
103+
bottom:0;
104+
right:-100%;
105+
width:100%;
106+
height: 2px;
107+
background: linear-gradient(270deg,transparent,#03e9f4);
108+
animation: animate3 1s linear infinite;
109+
animation-delay: 0.5s;
110+
111+
}
112+
113+
114+
@keyframes animate3 {
115+
116+
0%{
117+
right:-100%;
118+
}
119+
50%,100%{
120+
right:100%;
121+
}
122+
}
123+
124+
125+
a span:nth-child(4)
126+
{
127+
bottom:-100%;
128+
left:0;
129+
width:2px;
130+
height: 100%;
131+
background: linear-gradient(360deg,transparent,#03e9f4);
132+
animation: animate4 1s linear infinite;
133+
animation-delay: 0.75s;
134+
135+
}
136+
137+
138+
@keyframes animate4 {
139+
140+
0%{
141+
bottom:-100%;
142+
}
143+
50%,100%{
144+
bottom:100%;
145+
}
146+
}

‎neon-button.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Neon effect</title>
6+
<link rel="stylesheet" href="neon-btn.css">
7+
</head>
8+
<body>
9+
<a href="#">
10+
<span></span>
11+
<span></span>
12+
<span></span>
13+
<span></span>
14+
Neon button1
15+
</a>
16+
17+
<a href="#">
18+
<span></span>
19+
<span></span>
20+
<span></span>
21+
<span></span>
22+
Neon button2
23+
</a>
24+
25+
<a href="#">
26+
<span></span>
27+
<span></span>
28+
<span></span>
29+
<span></span>
30+
Neon button3
31+
</a>
32+
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)