How To Create Amazing Hover Effect On Social Media Buttons Using HTML & CSS

md selim mia January 15, 2022

  Project Introduction: In this project, we are going to implement a car running on a track using HTML and CSS with sound effects.

File structure:

  • . index.html
  • . style.css
  • .css/all.css

 HTML code:  In the following code,, first time open an index.html file then create HTML Structure. than Inside the body tag must take a <div></div> then take a class this class name anything select than create <a> </a> tag than make <i> tag and a class in the <i> this class name is fa fa-Facebook . than <a> tag and <i > copy and paste six time and change <i > tag class name and save this file

 DEM HTML;;:
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <!--font awesome filup-->
    <link rel="stylesheet" href="css/all.css">
    <title>Social media effect</title>
  <body>
    <div class="social">
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-youtube"></i></a>
      <a href="#"><i class="fab fa-linkedin-in"></i></a>
      <a href="#"><i class="fab fa-behance"></i></a>
    </div>
  </body>
</html>


style.css: The following is the code for file “style.css” which is used in the above HTML code. 

body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e1538;
}
.social a{
  display: inline-block;
  font-size: 40px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
  margin: 0 16px;
  transition: .4s linear ;
  position: relative;
}
.social a::before,.social a::after{
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: .4s linear;
}
.social a:hover{
  transform: scale(.8);
}
.social a:hover::before{
  border-left: 4px solid ;
  border-right: 4px solid;
  transform: skewX(20deg);
}
.social a:hover::after{
  border-top: 4px solid;
  border-bottom: 4px solid;
  transform: skewY(-20deg);
}

Output :  




My facebook page link:

My YouTube video:



md selim mia

Posted by md selim mia

Post a Comment

2 Comments

Ad Code

Responsive Advertisement