Simple Social Media Icons Hover Effect with CSS

Simple Social Media Icons Hover Effect with CSS

Social Media Icons hover effect

This is a CSS tutorial where you will learn how to create simple social media icons with a hover effect. The hover or animation effect makes the social button much more interesting. Here a few CSS social buttons have been created and hover colors have been used in them.

Social icons are a common element among different websites or projects. The social media buttons that have been created here use animated hover colors.

Social Media Icons hover effect

This social icon hovers effect is made using only HTML and CSS you can use anywhere. I have added icons using HTML. These social icons have been designed and hovered using CSS.

See the Pen
Social Icon Hover Effect by Shantanu Jana (@shantanu-jana)
on CodePen.

This is a complete tutorial where you can get all the source code, step-by-step tutorials, and live previews. So if you are a beginner then this tutorial will help you a lot. If you want to see the preview then use the demo section above.

Create a Social Media Buttons with CSS

Here five hover effect social icons are used and they are given in the form of a round button. 

Now if you want to make it, you need to have some idea about HTML and CSS. If you are not technical then use the download button directly below the article.

Step 1: HTML code of Social Icons

All social icons have been added by the following HTML code. Here I have used 5 social icons.

<div class=”social-icons”>
   <a class=”social-icon twitter” href=”#”>
      <i class=”fab fa-twitter”></i>
   </a>
   <a class=”social-icon dribbble” href=”#”>
      <i class=”fab fa-dribbble”></i>
   </a>
   <a class=”social-icon facebook” href=”#”>
      <i class=”fab fa-facebook-f”></i>
   </a>
   <a class=”social-icon instagram” href=”#”>
      <i class=”fab fa-instagram”></i>
   </a>
   <a class=”social-icon github” href=”#”>
      <i class=”fab fa-github”></i>
   </a>
</div>

Step 2: Basic design of webpage by CSS (more…)

Continue ReadingSimple Social Media Icons Hover Effect with CSS
Floating Social Media Icons using HTML CSS

Floating Social Media Icons using HTML CSS

Floating Social Media Icons CSS

If you are looking for how to create Floating Social Media Icons using HTML CSS then these CSS Social Share Buttons will help you completely.

If you are a beginner then this design is perfect for you. Social icons are a widely used web element that is used in many different types of websites. In the case of websites, there are different types of share icons, of which two or three are the most used.

The design that I have shared here is known as Sticky Social Button. Only icons can be found here. When you click on those icons or move the mouse, you can see the text with this icon. Many websites use plugins to create such share buttons. However, if you want, you can easily create with the help of HTML and CSS.

Floating Social Media Icons CSS

To create these Floating Social Media Icons you need to have a basic idea about HTML and CSS. First I created a floating area to the left of the webpage. There are 6 social icons. You can increase the amount of your choice if you want. Under normal circumstances, only the icons will be visible and the text will be hidden. When you hover the mouse over the icon, the text will be visible.

Below is a demo that will help you take a live preview. Here is the required source code that you can copy. 

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

To create it, you first need an HTML and CSS file. The icon is used here which requires a link to the font awesome CDN link to be effective.

HTML code of Sticky Social Media Bar

The following code is basically the HTML code required for this sharing button. Here are all the HTML codes I put together. 

Here 6 icons are used and text is added for each icon. Basic HTML code is used here so I did not give any explanation.

<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>

Design the webpage (more…)

Continue ReadingFloating Social Media Icons using HTML CSS