Hello readers, Today in this blog you’ll learn how to create Fixed Social Media Share Widget using HTML and CSS only. Previously I have shared a Pure CSS Responsive Cards Design with Hover Effect, now it’s time to create a Fixed Social Media Share Widget using only HTML & CSS.
Fixed Social Media Sidebar Widget which commonly used by many websites or blogs. This is a kind of WordPress plugin that builds the same type of social sharing widget. You will see mostly that kind of sharing button on many websites because this design is the default form of several plugins.
As you can see in the image, this is a fixed sidebar social media share widget using only HTML & CSS. In the image, you can see there are some social icons and one background image. All icons color by default their logo color, When you hover on it, the specific icon expands smoothly to show or informing which network it is.
If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Fixed Social Media Sidebar Widget).
Video Tutorial of Fixed Sidebar Social Media Share
I hope you understood the basic codes and concepts of this design. As you have seen in the video this is a pure CSS program, which means only HTML & CSS used to create this Fixed Sidebar Social Media Share Widget.
If you like this program (Fixed Social Media Sidebar Widget) and want to get the source codes of this widget. You can easily get it from the download link which is given below.
Fixed Social Media Share Widget [Source Codes]
To create this program (Fixed Social Media Sidebar Widget). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Floating Icons on Left Border</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<nav>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li>
<li><a href="#"><i class="fab fa-twitter"></i><span>Twitter</span></a></li>
<li><a href="#"><i class="fab fa-instagram"></i><span>Instagram</span></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a></li>
<li><a href="#"><i class="fab fa-github"></i><span>Github</span></a></li>
<li><a href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a></li>
</ul>
</nav>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
background: url(bg.jpeg);
background-position: center;
background-size: cover;
height: 100vh;
}
nav{
position: fixed;
width: 70px;
margin-top: 150px;
transition: all 0.3s linear;
box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
}
nav li{
height: 60px;
position:relative;
}
nav li a{
color: white;
display: block;
height: 100%;
width: 100%;
line-height: 60px;
padding-left:25%;
border-bottom: 1px solid rgba(0,0,0,.4);
transition: all .3s linear;
}
nav li:nth-child(1) a{
background: #4267B2;
}
nav li:nth-child(2) a{
background: #1DA1F2;
}
nav li:nth-child(3) a{
background: #E1306C;
}
nav li:nth-child(4) a{
background: #2867B2;
}
nav li:nth-child(5) a{
background: #333;
}
nav li:nth-child(6) a{
background: #ff0000;
}
nav li a i{
position:absolute;
top: 17px;
left: 20px;
font-size: 27px;
}
ul li a span{
display: none;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
a:hover {
z-index:1;
width: 200px;
border-bottom: 1px solid rgba(0,0,0,.5);
box-shadow: 0 0 1px 1px rgba(0,0,0,.3);
}
ul li:hover a span{
padding-left: 30%;
display: block;
}
That’s all, now you’ve successfully created a Fixed Social Media Sidebar Widget using HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
