you always see these small fixed social media button in too many websites.
in this tutorial, I will teach you how to create fixed social media button in HTML and CSS
this tutorial we will not use extra libraries or specific property, we will use the common property of CSS, it will be simple and the result will be just amazing.
now i will give you the source code of this project. I hope you will like it.
Video tutorial
HTML code
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="social">
<div class="button">
<p>Share 63K <i class="fab fa-facebook-f"></i></p>
</div>
<div class="button">
<p>Share 25K <i class="fab fa-twitter"></i></p>
</div>
<div class="button">
<p> share 63K <i class="fab fa-pinterest-p"></i></p>
</div>
<div class="button">
<p> share 63K <i class="fab fa-dribbble"></i></p>
</div>
</div>
</body>
</html>
CSS code
@import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
outline: 0;
}
.social{
position: fixed;
top: 50%;
transform: translateY(-50%);
}
.button{
background-color: #3b5998;
overflow: auto;
width: 170px;
padding: 15px 5px;
font-size: 1.3rem;
color: #fff;
margin-left: -130px;
transition: .4s ease-in-out;
cursor: pointer;
font-family: 'Roboto',sans-serif;
}
p{
float: left;
text-transform: uppercase;
}
i{
margin-left: 30px;
}
.button:hover{
margin-left: 0;
}
.button:nth-child(2){
background-color: #55acee;
}
.button:nth-child(3){
background-color: #bd081c;
}
.button:nth-child(4){
background-color: #ea4c89;
}
Make a Fixed social media buttons using only HTML and CSS
Reviewed by Medics
on
March 27, 2019
Rating:
Reviewed by Medics
on
March 27, 2019
Rating:
No comments: