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
How To Create a Bottom Navigation Bar HTML CSS

How To Create a Bottom Navigation Bar HTML CSS

How To Create a Bottom Navigation Bar HTML CSS

In this tutorial, you will learn how to create Bottom Navigation Bar HTML CSS. Earlier I shared another tutorial on creating a Bottom Navigation Menu. This type of CSS tab we see mainly in the case of responsive devices. 

This type of Bottom Navigation Bar HTML is found mainly in the case of mobile apps. This design can only be created by HTML CSS. 

Although I have used some JavaScript to make the animation used here work. If you omit the animation, you can create this mobile bottom navigation bar with HTML CSS.

Bottom Navigation Bar HTML CSS

For your convenience, I have given a preview below. Icons have been used instead of text for menus. If you only want the source code, use the button below the article.

See the Pen
Navigation Bar – JS by Foolish Developer (@foolishdevweb)
on CodePen.

First, the basic structure of the Fixed bottom navbar has been created on the webpage. White color has been used in the background of the navbar. 

Then I used 5 icons here. You can increase the amount of menu according to your needs. Here the color of the active icon will be red. Borders have been added to the active icons using CSS before and after. 

A border of 8px can be seen above and below the menu item that will be active. When you click on another icon, its borders will be removed and added to that icon.

How to Create a Bottom Navigation Menu

Below I have shared step by step tutorial and show how to create a bottom navigation bar design. For this, you need to have an idea about HTML, CSS, and javascript. 

However, if you are a beginner, follow the tutorial below. If you create this Bottom Navigation Menu using HTML checkboxes then you don’t need to use JavaScript.

Step 1: Basic structure of Bottom Navbar

First, the basic structure of this fixed bottom navbar has been created.

<nav class=”navigation-bar”>
  <ul class=”list-items”>
     
  </ul>
</nav>

I designed the webpage using the code below and added a background color.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

I have used min-height: 30px, min-width: 200px of this navbar and the background color is white.

.navigation-bar {
  background: #fff;
  border-radius: 3px;
  min-height:30px;
  min-width:200px;
  overflow: hidden;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.navigation-bar .list-items {
  list-style: none;
  display: flex;
  position: relative;
}
Basic structure of Bottom Navbar

Step 2: Add menu items to the Navigation Bar (more…)

Continue ReadingHow To Create a Bottom Navigation Bar HTML CSS