This content originally appeared on DEV Community and was authored by Technical Vandar
3D buttons using HTML & CSS.
Source Code:
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Buttons</title>
</head>
<body>
<ul>
<li>
<span><i class="fa fa-thumbs-o-up"></i></span>
<a href="#">Like</a>
</li>
<li>
<span><i class="fa fa-share"></i></span>
<a href="#">Share</a>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<a href="#">Subscribe</a>
</li>
</ul>
</body>
</html>
CSS CODE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #ccc;
}
ul{
display: flex;
position: absolute;
justify-content: center;
align-items: center;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
ul li{
list-style: none;
height: 65px;
width: 235px;
border: 1px solid black;
margin: 30px;
justify-content: center;
align-items: center;
display: flex;
font-size: 35px;
transform: rotate(-30deg) skewX(25deg) translate(0, 0);
transition: 1s;
box-shadow: -30px 30px 60px rgb(0, 45, 0.5);
}
ul li::before{
content: '';
position: absolute;
top: 10px;
height: 100%;
width: 20px;
left: -20px;
background: #ffffff;
transform: rotate(0deg) skewY(-45deg);
transition: 1s;
}
ul li::after{
content: '';
position: absolute;
bottom: -20px;
height: 20px;
width: 100%;
left: -10px;
background: #ffffff;
transform: rotate(0deg) skewX(-45deg);
transition: 1s;
}
ul li a{
margin: 15px;
text-decoration: none;
color: black;
}
ul li:hover{
background-color: black;
color: white;
margin-top: -20px;
}
ul li a:hover{
color: white;
}
ul li:hover::after{
box-shadow: -10px 10px 10px rgb(65, 85, 15);
background-color: aqua;
}
ul li:hover::before{
box-shadow: -10px 10px 10px rgb(65, 85, 15);
background-color: aqua;
}
Find Me On:
This content originally appeared on DEV Community and was authored by Technical Vandar
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Technical Vandar | Sciencx (2021-09-19T06:28:49+00:00) Awesome 3D Buttons using Pure HTML & CSS.. Retrieved from https://www.scien.cx/2021/09/19/awesome-3d-buttons-using-pure-html-css/
" » Awesome 3D Buttons using Pure HTML & CSS.." Technical Vandar | Sciencx - Sunday September 19, 2021, https://www.scien.cx/2021/09/19/awesome-3d-buttons-using-pure-html-css/
HARVARDTechnical Vandar | Sciencx Sunday September 19, 2021 » Awesome 3D Buttons using Pure HTML & CSS.., viewed ,<https://www.scien.cx/2021/09/19/awesome-3d-buttons-using-pure-html-css/>
VANCOUVERTechnical Vandar | Sciencx - » Awesome 3D Buttons using Pure HTML & CSS.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/19/awesome-3d-buttons-using-pure-html-css/
CHICAGO" » Awesome 3D Buttons using Pure HTML & CSS.." Technical Vandar | Sciencx - Accessed . https://www.scien.cx/2021/09/19/awesome-3d-buttons-using-pure-html-css/
IEEE" » Awesome 3D Buttons using Pure HTML & CSS.." Technical Vandar | Sciencx [Online]. Available: https://www.scien.cx/2021/09/19/awesome-3d-buttons-using-pure-html-css/. [Accessed: ]
rf:citation » Awesome 3D Buttons using Pure HTML & CSS. | Technical Vandar | Sciencx | https://www.scien.cx/2021/09/19/awesome-3d-buttons-using-pure-html-css/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.