Call Action Button Hover Effect on social media icons -

Call Action Button Hover Effect on social media icons

Hover effects are generally used on buttons to give nice visual feedback to the user. In this article, we will be discussing how to create a hover effect on social media icons using HTML & CSS.

Social media sites like Facebook, Twitter, Linkedin, Google+ and their respective business pages, are a great means to get in touch with your potential customers, to keep in touch with your current customer base, and to bring up your brand.
Blog Body: But more than being a simple link to your site, a social media icon in itself is a strong visual asset. Social media icons are a powerful marketing tool: they are a way to promote your brand and expand your customer base.

In this post, I will show you how to create a special hover effect on hover action button social media icons. We will achieve this effect by using CSS.
How to create a hover effect on hover action button social media icons?
First, we need to define the element on which we are going to create this hover effect. So let’s define a div element using the div tag as follows.  

Step-1 Add This Code In Your Html File

<div class="wrapper">
  <div class="navbar">
    <i class="fas fa-home icon-home"></i>
    <i class="fas fa-cog icon-settings"></i>

    <div class="circle">
      <i class="fas fa-plus plus-icon"></i>
      <i class="fab fa-facebook social"></i>
      <i class="fab fa-instagram social"></i>
      <i class="fab fa-twitter  social"></i>
	  <i class="fab fa-youtube  social" style="margin-top:5px"></i>
    </div>
    <div class="circleBackground"></div>
  </div>
</div>

Step-2 Add The Code Given Below in CSS File

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

* {
  box-sizing: border-box;
}

.wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff9c1;
}

.navbar {
  position: relative;
  height: 100px;
  min-width: 400px;
  padding-left: 35px;
  padding-right: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 25px;
  background-color: white;
  box-shadow: 0 10px 20px rgba(82, 74, 74, 0.3);
}

.navbar:after {
  content: "";
  position: absolute;
  bottom: 7px;
  height: 4px;
  width: 35%;
  left: 50%;
  transform: translateX(-50%);
  background-color: gray;
  opacity: 0.3;
}

.circle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100px - 40px);
  margin-bottom: 0;
  height: 80px;
  width: 80px;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #ff5e00;
  z-index: 9;
  box-shadow: 0 5px 5px rgba(255, 147, 85, 0.35);
  transition: height 0.3s;
}

.circle:hover {
  height: 270px;
  border-radius: 50px;
}

.circle .plus-icon {
  color: white;
  font-size: 27px;
  transition: opacity 0.3s, transform 0.2s;
}

.circle:hover .plus-icon {
  transform: rotate(360deg);
  opacity: 0;
}

.circle .social {
  position: absolute;
  top: 195px;
  color: white;
  background-color: rgba(255, 212, 212, 0.308);
  height: 60px;
  width: 60px;
  margin-bottom: 5px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  cursor: pointer;
}

.circle .social:nth-child(2) {
  opacity: 0;
  transition: opacity 0.3s, top 0.5s ease;
}

.circle .social:nth-child(3) {
  opacity: 0;
  transition: opacity 0.3s, top 0.5s 0.1s ease;
}

.circle .social:nth-child(4) {
  opacity: 0;
  transition: opacity 0.3s, top 0.5s 0.22s ease;
  margin-bottom: 0px;
}

.circle:hover .social:nth-child(2) {
  opacity: 1;
  top: 5px;
}

.circle:hover .social:nth-child(3) {
  opacity: 1;
  top: calc(5px + 60px + 5px);
}

.circle:hover .social:nth-child(4) {
  opacity: 1;
  top: calc(5px + 60px + 5px + 60px + 5px);
}

.circleBackground {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100px - 100px / 2);
  margin-bottom: 0;
  height: calc(80px + 20px);
  width: calc(80px + 20px);
  border-radius: calc(100px / 2);
  background-color: #7f0a0a;
}

.icon-home,
.icon-settings {
  font-size: 29px;
  color: #7f0a0a;
  
}

Step-3 Add The Code Given Below in Javascript

<script>
let links = document.querySelectorAll('li.link');
let buble = document.querySelector('.buble');

links.forEach(el=>el.addEventListener('click',(e)=>{
  document.querySelector('li.active').classList.remove('active')
  el.classList.add('active');
  buble.style.left = `${el.offsetLeft + 8}px`
}))
</script>

Step-4 Add The Font Awesome CDN Link Given Below in Head Tag of Your Html File

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

You might also like

Leave a Reply

Your email address will not be published. Required fields are marked *