In this video we will create 3d button using html css
Getting started
It’s pretty easy to get started with Statusfy.
Create a new index.html file with this HTML code..
<ul class="button-3d">
<li>
<a href="#">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<span>- Like</span>
</a>
<a href="#">
<i class="fa fa-comment" aria-hidden="true"></i>
<span>- Comment</span>
</a>
<a href="#">
<i class="fa fa-heart" aria-hidden="true"></i>
<span>- Subscribe</span>
</a>
<a href="#">
<i class="fa fa-share" aria-hidden="true"></i>
<span>- Share</span>
</a>
</li>
</ul>
Create a style.css file with this CSS code.
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
margin: 0;
padding: 0;
}
body {
background: #727272;
font-family: 'Roboto', sans-serif;
}
ul.button-3d {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
margin: 0;
padding: 0;
}
ul.button-3d li {
list-style: none;
margin: 0 5px;
display: inherit;
}
ul.button-3d li a .fa {
font-size: 40px;
color: #333;
line-height: 80px;
transition: 0.5s;
padding-right: 14px;
}
ul.button-3d li a span {
padding: 0;
margin: 0;
position: absolute;
top: 30px;
color: #333;
transition: 0.5s;
}
ul.button-3d li a {
text-decoration: none;
display: block;
width: 210px;
height: 80px;
background-color: #fff;
text-align: left;
padding-left: 20px;
transform: rotate(-30deg) skewX(25deg) translate(0,0);
transition: 0.5s;
box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
}
ul.button-3d li a::before {
content: '';
position: absolute;
top: 10px;
left: -20px;
height: 100%;
width: 20px;
background-color: #b1b1b1;
transition: 0.5s;
transform: rotate(0deg) skewY(-45deg);
}
ul.button-3d li a::after {
content: '';
position: absolute;
bottom: -20px;
left: -10px;
height: 20px;
width: 100%;
background-color: #b1b1b1;
transition: 0.5s;
transform: rotate(0deg) skewX(-45deg);
}
ul.button-3d li a:hover {
transform: rotate(-30deg) skew(25deg) translate(20px, -15px);
box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
}
then,
connect the style.css file in index.html file
I hope you know how to add css and js file in html. Or follow tutorial video..
0 Comments