Build a social media UI widget

Social media widgets integration with the website plays a unique role in the marketing ecosystem, be it about increasing reach, engaging users, or event conversions.

HTML Code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="box">
  <ul>
    <li><a class="social facebook" href=""> /FACEBOOK</a></li>   
    <li><a class="social twitter" href=""> /TWITTER</a></li>
    <li><a class="social google-plus" href=""> /GOOGLE+</a></li>
    <li><a class="social youtube" href=""> /YOUTUBE</a></li>
  </ul>
</div>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #f5f5f5;
  font-family: 'Roboto', sans-serif;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 300px;
}
ul{
  margin: 0;
  padding: 0;
}
ul li{
  display: block;
  margin: 5px;
  border: 1px solid rgba(0,0,0,0.2);
  overflow: hidden;
}
ul li a{
  display: block;
  padding: 5px;
  font-size: 26px;
  text-shadow: 0 0 1px #000;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
ul li a.facebook{
  background-color: #3b5999;
  transition: .5s;
}
ul li:hover a.facebook{
  box-shadow: inset 5px 5px 100px #fff;
}
a.facebook:before{
  content: '\f230';
}
a.twitter{
  background-color: #55acee;
  transition: .5s;
}
ul li:hover a.twitter{
  box-shadow: inset 5px 5px 100px #fff;
}
a.twitter:before{
  content: '\f081';
}
a.google-plus{
  background-color: #dd4b39;
  transition: .5s;
}
ul li:hover a.google-plus{
  box-shadow: inset 5px 5px 100px #fff;
}
a.google-plus:before{
  content: '\f0d4';
}
a.youtube{
  background-color: #cd201f;
  transition: .5s;
}
ul li:hover a.youtube{
  box-shadow: inset 5px 5px 100px #fff;
}
a.youtube:before{
  content: '\f16a';
  transition: .5s;
}
.social{
    font-family: FontAwesome;
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply