Description:-

Hello everyone! In this video, you are going to learn " Social Media Button With Animation - Using HTML & CSS ".

Let's see!

You Might Also Like ➝

•Hover animation (before / after) with Text

•Glowing Neon Button With Hover effect

• Custom Select Box - Using HTML & CSS

• Awesome Web Page Preloader - Using HTML & CSS

• Flame Effect Text - Using HTML & CSS

• The Glassmorphism Social Button | Using HTML & CSS

• Top 40 HTML Interview Questions | HTML5 Intervie

All the source codes and source files and available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

Source code:-

Social Media Button With Animation - Using HTML & CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <ul>
      <li class="facebook">
        <i class="fa fa-facebook" aria-hidden="true"></i>
        <div class="slider">
          <p>facebook</p>
        </div>
      </li>

<li class="twitter">
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <div class="slider">
          <p>twitter</p>
        </div>
      </li>
      <li class="instagram">
        <i class="fa fa-instagram" aria-hidden="true"></i>
        <div class="slider">
          <p>instagram</p>
        </div>
      </li>

<li class="google">
        <i class="fa fa-google" aria-hidden="true"></i>
        <div class="slider">
          <p>google</p>
        </div>
      </li>
      <li class="whatsapp">
        <i class="fa fa-whatsapp" aria-hidden="true"></i>
        <div class="slider">
          <p>whatsapp</p>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background: #30333A;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
}

ul {
  list-style: none;
}

ul li {
  width: 50px;
  height: 50px;
  position: relative;
  background: #e59500;
  margin: 10px 0;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

ul li .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #fff;
}

ul li.facebook{
  background: #3b5998;
}

ul li.twitter{
  background: #00aced;
}

ul li.instagram{
  background: #bc2a8d;
}

ul li.google{
  background: #dd4b39;
}

ul li.whatsapp{
  background: #4dc247;
}

ul li.facebook div.slider{
  background: #627aac;
}

ul li.twitter div.slider{
  background: #7fd5f6;
}

ul li.instagram div.slider{
  background: #dd94c6;
}

ul li.google div.slider{
  background: #eea59c;
}

ul li.whatsapp div.slider{
  background: #82d47e;
}

.slider {
  content: "";
  position: absolute;
  top: 0;
  left: 51px;
  width: 0px;
  height: 50px;
  background: #eebb5c;
  border-radius: 3px;
  transition: all 0.5s 0.3s ease;
}

.slider p {
  font-family: arial;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  line-height: 50px;
  opacity: 0;
  transition: all 0.6s ease;
}

ul li:hover .slider {
  width: 180px;
  transition: all 0.5s ease;
}

ul li:hover .slider p {
  opacity: 1;
  transition: all 1s 0.2s ease;
}

/* youtube link */
.youtube{
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 160px;
  text-align: center;
  padding: 15px 10px;
  background: #bb0000;
  border-radius: 5px;
}

.youtube a{
  text-decoration: none;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 1px;
}

Join Our Official Telegram Community for more Projects with Source Code and Job updates.

Social Media Button With Animation - Using HTML & CSS

Description:-

You Might Also Like ➝

Source code:-

Social Media Button With Animation - Using HTML & CSS

HTML

CSS

Post a Comment

Contact Form