How To Make Social Media Counter Hover UI Design With HTML And CSS

RH Suman
July 6, 2022

141

Make social media counter hover UI design with HTML And CSS

HTML Code:

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

<div class="box">
    <ul>
      <li class="fb"><a href=""><i class="fab fa-facebook-f"></i></a><span>200</span></li>
      <li class="gp"><a href=""><i class="fab fa-google-plus-g"></i></a><span>310</span></li>
      <li class="tw"><a href=""><i class="fab fa-twitter"></i></a><span>780</span></li>
      <li class="yt"><a href=""><i class="fab fa-youtube"></i></a><span>827</span></li>
    </ul>
  </div>

CSS Code:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: sans-serif;
  background-color: #f5f5f5;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 300px;
  border: 0 0 1px 0 rgba(0,0,0,0.2)
}
.box ul{
  width: 100%;
  margin: 0;
  padding: 0
}
.box ul li{
  float: left;
  list-style-type: none;
  width: 25%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  position: relative;
}
.box ul li a{
  display: block;
  font-size: 26px;
  color: #fff;
  transition: .6s
}
.box ul li:hover a{
  transform: scale(0);
}
.box ul li span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0px;
  font-weight: bold;
  transition: .6s;
  color: #fff;
}
.box ul li:hover span{
  font-size: 26px;

}
.box ul li.fb{
  background-color: #3b5999;
}
.box ul li.tw{
  background-color: #55acee;
}
.box ul li.gp{
  background-color: #dd4b39;
}
.box ul li.yt{
  background-color: #cd201f;
}

Preview:

Tags

Social Hover Animation HTML CSS Counter

Subscribe

Get Updates

Subscribe our newsletter to get the last update into your inbox!

Please insert email address.

Recommended Posts