Skip to content

Commit 94d9d92

Browse files
sahilataharsahilatahar
committed
Loaders and Button Added
1 parent 27c330f commit 94d9d92

File tree

6 files changed

+323
-7
lines changed

6 files changed

+323
-7
lines changed

‎10 CSS Animated Buttons/index.html renamed to ‎CSS Animated Buttons/index.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
</div>
4141
<!-- Button 8 HTML -->
4242
<div class="block">
43-
<button class="button button-8"><span>Hover me</span></button>
43+
<button class="button button-8">Hover me</button>
4444
</div>
4545
<!-- Button 9 HTML -->
4646
<div class="block">
@@ -52,6 +52,10 @@
5252
<div class="block">
5353
<button class="button button-10">Button</button>
5454
</div>
55+
<!-- Button 11 HTML -->
56+
<div class="block">
57+
<button class="button button-11">Hover me</button>
58+
</div>
5559
</body>
5660

5761
</html>

‎10 CSS Animated Buttons/style.css renamed to ‎CSS Animated Buttons/style.css

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -126,11 +126,6 @@ body {
126126
position: relative;
127127
}
128128

129-
.button-8 span {
130-
position: relative;
131-
z-index: 2;
132-
}
133-
134129
.button-8::after {
135130
content: '';
136131
position: absolute;
@@ -148,7 +143,7 @@ body {
148143
width: 100%;
149144
}
150145

151-
.button-8:hover span {
146+
.button-8:hover {
152147
color: white;
153148
}
154149

@@ -254,4 +249,50 @@ body {
254249
100% {
255250
background-position: 0% 50%
256251
}
252+
}
253+
254+
255+
.button-11 {
256+
border: none;
257+
color: black;
258+
font-weight: 500;
259+
position: relative;
260+
background-color: #0097e6;
261+
color: white;
262+
}
263+
264+
.button-11::before {
265+
content: '';
266+
position: absolute;
267+
top: -6px;
268+
left: -6px;
269+
width: 30%;
270+
height: 30%;
271+
border-top: 3px solid #0097e6;
272+
border-left: 3px solid #0097e6;
273+
transition: all 0.3s;
274+
z-index: -1;
275+
}
276+
277+
.button-11:hover::before {
278+
width: 100%;
279+
height: 100%;
280+
}
281+
282+
.button-11::after {
283+
content: '';
284+
position: absolute;
285+
right: -6px;
286+
bottom: -6px;
287+
width: 30%;
288+
height: 30%;
289+
border-right: 3px solid #0097e6;
290+
border-bottom: 3px solid #0097e6;
291+
transition: all 0.3s;
292+
z-index: -1;
293+
}
294+
295+
.button-11:hover::after {
296+
width: 100%;
297+
height: 100%;
257298
}

‎Loaders/Circular Loader/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 http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Circular Loader</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div class="loader">
14+
<div class="circle"></div>
15+
</div>
16+
</body>
17+
18+
</html>

‎Loaders/Circular Loader/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
background-color: #cf6a87;
13+
}
14+
15+
.loader {
16+
width: 80px;
17+
height: 80px;
18+
}
19+
20+
.circle {
21+
height: 100%;
22+
border-radius: 50%;
23+
animation: animate 2s linear infinite;
24+
-o-animation: animate 2s linear infinite;
25+
-webkit-animation: animate 2s linear infinite;
26+
-moz-animation: animate 2s linear infinite;
27+
border: 8px solid white;
28+
border-top: 8px solid #303952;
29+
}
30+
31+
@-webkit-keyframes animate {
32+
0% {
33+
transform: rotateZ(0deg);
34+
}
35+
36+
100% {
37+
transform: rotateZ(360deg);
38+
}
39+
}
40+
41+
@-o-keyframes animate {
42+
0% {
43+
transform: rotateZ(0deg);
44+
}
45+
46+
100% {
47+
transform: rotateZ(360deg);
48+
}
49+
}
50+
51+
@-moz-keyframes animate {
52+
0% {
53+
transform: rotateZ(0deg);
54+
}
55+
56+
100% {
57+
transform: rotateZ(360deg);
58+
}
59+
}
60+
61+
@-ms-keyframes animate {
62+
0% {
63+
transform: rotateZ(0deg);
64+
}
65+
66+
100% {
67+
transform: rotateZ(360deg);
68+
}
69+
}
70+
71+
@keyframes animate {
72+
0% {
73+
transform: rotateZ(0deg);
74+
}
75+
76+
100% {
77+
transform: rotateZ(360deg);
78+
}
79+
}

‎Loaders/Rectangle Loader/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Rectangle Loader</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div class="loader">
14+
<span id="rect_loader1"></span>
15+
<span id="rect_loader2"></span>
16+
<span id="rect_loader3"></span>
17+
</div>
18+
</body>
19+
20+
</html>

‎Loaders/Rectangle Loader/style.css

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
}
13+
14+
.loader {
15+
width: 100px;
16+
height: 100px;
17+
position: relative;
18+
}
19+
20+
.loader>span {
21+
position: absolute;
22+
display: inline-block;
23+
width: 40%;
24+
height: 40%;
25+
background-color: red;
26+
animation: animate 2s linear infinite;
27+
-o-animation: animate 2s linear infinite;
28+
-webkit-animation: animate 2s linear infinite;
29+
-moz-animation: animate 2s linear infinite;
30+
border-radius: 3px;
31+
}
32+
33+
#rect_loader1 {
34+
animation-delay: 0.67s;
35+
-webkit-animation-delay: 0.67s;
36+
-moz-animation-delay: 0.67s;
37+
-o-animation-delay: 0.67s;
38+
}
39+
40+
#rect_loader2 {
41+
animation-delay: 1.34s;
42+
-webkit-animation-delay: 1.34s;
43+
-moz-animation-delay: 1.34s;
44+
-o-animation-delay: 1.34s;
45+
}
46+
47+
48+
@-webkit-keyframes animate {
49+
0% {
50+
top: 0%;
51+
left: 0%;
52+
}
53+
54+
25% {
55+
top: 0%;
56+
left: 60%;
57+
}
58+
59+
50% {
60+
top: 60%;
61+
left: 60%;
62+
}
63+
64+
75% {
65+
top: 60%;
66+
left: 0%;
67+
}
68+
69+
100% {
70+
top: 0%;
71+
left: 0%;
72+
}
73+
}
74+
75+
@-o-keyframes animate {
76+
0% {
77+
top: 0%;
78+
left: 0%;
79+
}
80+
81+
25% {
82+
top: 0%;
83+
left: 60%;
84+
}
85+
86+
50% {
87+
top: 60%;
88+
left: 60%;
89+
}
90+
91+
75% {
92+
top: 60%;
93+
left: 0%;
94+
}
95+
96+
100% {
97+
top: 0%;
98+
left: 0%;
99+
}
100+
}
101+
102+
@-moz-keyframes animate {
103+
0% {
104+
top: 0%;
105+
left: 0%;
106+
}
107+
108+
25% {
109+
top: 0%;
110+
left: 60%;
111+
}
112+
113+
50% {
114+
top: 60%;
115+
left: 60%;
116+
}
117+
118+
75% {
119+
top: 60%;
120+
left: 0%;
121+
}
122+
123+
100% {
124+
top: 0%;
125+
left: 0%;
126+
}
127+
}
128+
129+
@keyframes animate {
130+
0% {
131+
top: 0%;
132+
left: 0%;
133+
}
134+
135+
25% {
136+
top: 0%;
137+
left: 60%;
138+
}
139+
140+
50% {
141+
top: 60%;
142+
left: 60%;
143+
}
144+
145+
75% {
146+
top: 60%;
147+
left: 0%;
148+
}
149+
150+
100% {
151+
top: 0%;
152+
left: 0%;
153+
}
154+
}

0 commit comments

Comments
 (0)