Skip to content

Commit 23c4dc7

Browse files
HuXn-WebDevHuXn-WebDev
committed
Top 5 Creative Buttons
1 parent 7bd9178 commit 23c4dc7

File tree

10 files changed

+345
-0
lines changed

10 files changed

+345
-0
lines changed

‎05. Top 5 Creative Buttons/btn1/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Btn 1</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="container">
11+
<a href="">Hover Me</a>
12+
</section>
13+
</body>
14+
</html>

‎05. Top 5 Creative Buttons/btn1/style.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.container {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
background: rgb(16, 16, 16);
13+
font-family: sans-serif;
14+
}
15+
16+
a {
17+
text-decoration: none;
18+
color: antiquewhite;
19+
border: 2px solid antiquewhite;
20+
padding: 2rem 5rem;
21+
position: relative;
22+
overflow: hidden;
23+
transition: all 1s;
24+
}
25+
26+
a:before {
27+
content: "DOWNLOAD";
28+
font-weight: bold;
29+
color: #000;
30+
position: absolute;
31+
left: 0;
32+
top: 0;
33+
width: 100%;
34+
height: 100%;
35+
background: antiquewhite;
36+
transform: translateY(-100%);
37+
transition: all 1s;
38+
/* center */
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
}
43+
44+
a:hover:before {
45+
transform: translateY(0);
46+
}

‎05. Top 5 Creative Buttons/btn2/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Btn 2</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<a href="">Hover Me</a>
11+
</body>
12+
</html>

‎05. Top 5 Creative Buttons/btn2/style.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
body {
2+
height: 100vh;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
font-family: sans-serif;
7+
}
8+
9+
a {
10+
padding: 2rem 3rem;
11+
text-transform: uppercase;
12+
background-color: blueviolet;
13+
color: #fff;
14+
font-size: 1.5rem;
15+
position: relative;
16+
text-decoration: none;
17+
}
18+
19+
a::before {
20+
content: "button";
21+
position: absolute;
22+
top: 0;
23+
left: 0;
24+
width: 100%;
25+
height: 100%;
26+
background: crimson;
27+
/* center our content */
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
/* Let's provide our rotation/animation */
32+
transform: rotateX(270deg);
33+
transform-origin: top;
34+
transition: all 0.5s;
35+
}
36+
37+
a::after {
38+
content: "button";
39+
position: absolute;
40+
top: 0;
41+
left: 0;
42+
width: 100%;
43+
height: 100%;
44+
background: rgb(14, 231, 14);
45+
display: flex;
46+
justify-content: center;
47+
align-items: center;
48+
transform: rotateX(270deg);
49+
transform-origin: top;
50+
transition: all 0.5s;
51+
transition-delay: 0.25s;
52+
}
53+
54+
a:hover:before,
55+
a:hover:after {
56+
transform: rotateX(0);
57+
}

‎05. Top 5 Creative Buttons/btn3/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Btn 3</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<a href="">Hover Me</a>
11+
</body>
12+
</html>

‎05. Top 5 Creative Buttons/btn3/style.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
body {
2+
height: 100vh;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
font-family: sans-serif;
7+
}
8+
9+
a {
10+
width: 300px;
11+
height: 60px;
12+
text-decoration: none;
13+
text-transform: uppercase;
14+
background: transparent;
15+
text-align: center;
16+
line-height: 60px;
17+
font-weight: bold;
18+
letter-spacing: 2px;
19+
position: relative;
20+
transition: all 0.2s;
21+
color: #fff;
22+
}
23+
24+
a:before {
25+
content: "";
26+
position: absolute;
27+
top: -3px;
28+
left: -3px;
29+
width: 100%;
30+
height: 100%;
31+
background: #06c988a4;
32+
z-index: -1;
33+
mix-blend-mode: multiply;
34+
transition: all 0.2s;
35+
transform-origin: top;
36+
}
37+
38+
a:after {
39+
content: "";
40+
position: absolute;
41+
top: 3px;
42+
left: 3px;
43+
width: 100%;
44+
height: 100%;
45+
background: #ffff00a6;
46+
z-index: -1;
47+
mix-blend-mode: multiply;
48+
transition: all 0.2s;
49+
transform-origin: bottom;
50+
}
51+
52+
a:hover:before {
53+
top: -6px;
54+
left: 0;
55+
transform: perspective(1000px) rotateX(75deg);
56+
}
57+
58+
a:hover:after {
59+
top: 6px;
60+
left: 0;
61+
transform: perspective(1000px) rotateX(-75deg);
62+
}
63+
64+
a:hover {
65+
color: #000;
66+
}

‎05. Top 5 Creative Buttons/btn4/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Btn 4</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="container">
11+
<button class="btn">Learn More</button>
12+
</section>
13+
</body>
14+
</html>

‎05. Top 5 Creative Buttons/btn4/style.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.container {
8+
height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
font-family: sans-serif;
13+
background: crimson;
14+
}
15+
16+
.btn {
17+
border: none;
18+
padding: 1rem 4rem;
19+
background: rgba(17, 17, 137, 0.824);
20+
color: #fff;
21+
font-size: 22px;
22+
text-transform: uppercase;
23+
position: relative;
24+
cursor: pointer;
25+
}
26+
27+
.btn:before {
28+
content: "";
29+
position: absolute;
30+
width: 24px;
31+
height: 24px;
32+
top: -10px;
33+
left: -10px;
34+
/* background: teal; */
35+
border-top: 4px solid darkblue;
36+
border-left: 4px solid darkblue;
37+
transition: all 0.25s;
38+
}
39+
40+
.btn:hover:before,
41+
.btn:hover:after {
42+
height: 100%;
43+
width: 100%;
44+
}
45+
46+
.btn:after {
47+
content: "";
48+
position: absolute;
49+
width: 24px;
50+
height: 24px;
51+
bottom: -10px;
52+
right: -10px;
53+
border-bottom: 4px solid darkblue;
54+
border-right: 4px solid darkblue;
55+
transition: all 0.25s;
56+
}

‎05. Top 5 Creative Buttons/btn5/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Btn 5</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="container">
11+
<a href="">Hover Me</a>
12+
</section>
13+
</body>
14+
</html>

‎05. Top 5 Creative Buttons/btn5/style.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.container {
8+
height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
font-family: sans-serif;
13+
background: #000;
14+
}
15+
16+
a {
17+
position: absolute;
18+
text-decoration: none;
19+
text-transform: uppercase;
20+
padding: 1rem 4rem;
21+
background: #fff;
22+
color: #000;
23+
border-radius: 100px;
24+
font-size: 1.5rem;
25+
transition: all 0.2s;
26+
}
27+
28+
a:before {
29+
content: "";
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
width: 100%;
34+
height: 100%;
35+
background: #fff;
36+
border-radius: 100px;
37+
transition: all 1s;
38+
z-index: -1;
39+
}
40+
41+
a:hover:before {
42+
transform: scaleX(1.4) scaleY(1.6);
43+
opacity: 0;
44+
}
45+
46+
a:hover {
47+
transform: translateY(-3px);
48+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
49+
}
50+
51+
a:active {
52+
transform: translateY(-1px);
53+
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
54+
}

0 commit comments

Comments
 (0)