codemediaweb.com

Code Media

hire me

CSS Floating Social Media Icons with Hover Effects

by
CSS Floating Social Media Icons with Hover Effects

In this article, you will learn how to create CSS Floating Social Media Icons using HTML and CSS. I have added a hover effect to this Sticky Social Media Bar. This makes it look more attractive and beautiful. Under normal conditions, only icons can be seen. When you hover over the HTML CSS Floating Social Media Icons, a text appears along with the icon.

You must have seen icons on social media in many places. Every website uses it. Users use this type of social media button to share content with their social media account. Which undoubtedly helps to increase the popularity of your website or content.

The design I saw here today is a completely horizontal side icon bar. It will be floating along the entire horizontal on the right side of the website or content. When the user clicks on it, the text can be seen with the icon. Here I have used 6 social media icons. You can use other icons instead if you want. You need to have an idea about basic HTML and CSS to create this design.

Create Floating Social Media Icons with Hover Effects 

Now I have shown how floating social media share buttons are created using HTML and CSS. First I added six icons and text with them. Using CSS I kept them floating on the right side. Under normal circumstances, the user will only see the icon. When you hover the mouse over the user, you will see the text with the icon. 

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

I have used the font awesome CDN link to make the icons work here. To create it you create an HTML and CSS file. Then follow the tutorial step by step below.

Step1: Add social icons using HTML

Using the following HTML code, I have added the necessary icons and tests to create this social bar. Here I have used a total of 6 icons and added necessary tests with them.

<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>
Add social icons using HTML

Step 2: Basic design of floating social bar

Using the CSS below, I have arranged these icons and tests to be floating on the right side. I have used the icon bar width of 70 px here. Its position fix has been used. Box-shadow has been used which makes it brighter and more attractive.

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
body{
  font-family: sans-serif;
  background-position: center;
  background-size: cover;
  height: 100vh;
}
nav{
  position: fixed;
  width: 70px;
  margin-top: 50px;
  transition: all 0.3s linear;
  box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
}
Basic design of floating social bar

Step 3: Design Social Media Icons

Now I have designed each icon separately using the following CSS. The width of an icon box is 60px.

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;
}
Design Social Media Icons

Step 4: Add a different background color for each icon

Now using the following codes I have added a different background color for each icon. Different types of icons have been used here. His background color has been added accordingly.

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;
}
Add a different background color for each icon

Step 5: Design icons and text using CSS

Now I have designed the icons and tests. Here font-size: 27px has been used to increase the size of the icons and I have taken the help of left and top to determine the position.

I have used display: none of the text here, which means it cannot be seen under normal conditions.

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;
}
Design icons and text using CSS

Step 6: Add hover to CSS Floating Social Media Icons

Now I have added the hover effect. When you hover the mouse over it, the width of the icon bar will move from 70px to 200px. With this, the text of the icon can be seen.

a:hover {
  z-index:1;
  width: 200px;
}
ul li:hover a span{
  padding-left: 30%;
  display: block;
}
CSS Floating Social Media Icons

 Hopefully, you have learned from this tutorial how to create social media floating icons using HTML and CSS. You can increase or decrease the number of other icons here if you wish. 

If you want the source code to create this project (How To Make Floating Social Media Icons) then you can use the download button below.

Leave a comment