Skip to content

Commit 0fb480e

Browse files
abstrxtInfinityabstrxtInfinity
committed
energy_Buttons
1 parent 018c22b commit 0fb480e

2 files changed

Lines changed: 126 additions & 0 deletions

File tree

‎EnergyButton/button.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
6+
}
7+
8+
body {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
background: #000;
13+
min-height: 100vh;
14+
}
15+
16+
.container {
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
flex-wrap: wrap;
21+
}
22+
23+
.container a {
24+
position: relative;
25+
display: inline-block;
26+
padding: 15px 30px;
27+
border: 2px solid #0f0;
28+
margin: 40px;
29+
text-transform: uppercase;
30+
font-weight: 600;
31+
text-decoration: none;
32+
letter-spacing: 2px;
33+
color: #fff;
34+
-webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
35+
transition: .5s;
36+
transition-delay: 0s;
37+
38+
}
39+
40+
.container a:hover {
41+
transition-delay: 1s;
42+
color: #000;
43+
box-shadow: 0 0 10px #0f0,
44+
0 0 20px #0f0,
45+
0 0 40px #0f0,
46+
0 0 80px #0f0,
47+
0 0 100px #0f0;
48+
}
49+
50+
.container a span {
51+
position: relative;
52+
z-index: 100;
53+
54+
}
55+
56+
.container a:nth-child(2) {
57+
filter: hue-rotate(80deg);
58+
}
59+
60+
61+
62+
.container a::before {
63+
content: '';
64+
position: absolute;
65+
left: -20px;
66+
top: 50%;
67+
transform: translateY(-50%);
68+
width: 20px;
69+
height: 1px;
70+
background: #0f0;
71+
box-shadow: 5px -8px 0 #0f0,
72+
5px 8px 0 #0f0;
73+
transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
74+
transition-delay: 1s, 0.5s, 0s, 0s;
75+
}
76+
77+
.container a:hover::before {
78+
width: 60%;
79+
height: 105%;
80+
left: -2px;
81+
box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0;
82+
transition-delay: 0s, 0s, 0.9s, 1s;
83+
}
84+
85+
/* --------------------------------- */
86+
.container a::after {
87+
content: '';
88+
position: absolute;
89+
right: -20px;
90+
top: 50%;
91+
transform: translateY(-50%);
92+
width: 20px;
93+
height: 1px;
94+
background: #0f0;
95+
box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0;
96+
transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s;
97+
transition-delay: 1s, 0.5s, 0s, 0s;
98+
}
99+
100+
.container a:hover::after {
101+
width: 60%;
102+
height: 105%;
103+
right: -2px;
104+
box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0;
105+
transition-delay: 0s, 0s, .9s, 1s;
106+
107+
108+
}

‎EnergyButton/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Energy_buttons</title>
8+
<link rel="stylesheet" href="./button.css">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<a href="#"><span>Read More</span></a>
14+
<a href="#"><span>Read More</span></a>
15+
</div>
16+
</body>
17+
18+
</html>

0 commit comments

Comments
 (0)