Make cool social Icons using HTML and CSS

February 24, 2021 June 01, 2021

Hello readers we are back with another interesting post. This post is based on the topic of HTML and CSS.Hope all are doing well and safe. Explore all the contents of our blog and support us.

In this post we are going to learn how to code "Make social icons using " using HTML and pure CSS.We are going to learn about the appearance of it and how to code it.

What are social media buttons?

Social media buttons are the type of buttons which contains the social media icons which act as a link for one's social profile. In this post I have coded various social buttons such as Facebook, Twitter, Linkedin, youtube, Instagram and Pinterest.

How do these Pulsating buttons behave?

These are rounded social media buttons.
On hover they act like Animated buttons.
Animated effect is like the movement of heart beat.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
</head>
<body>
  <div class="sm">
    <a href="#"><i class="fab fa-facebook-f"></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>
    <a href="#"><i class="fab fa-whatsapp"></i></a>
    <a href="#"><i class="fab fa-telegram"></i></a>
    <a href="#"><i class="fab fa-snapchat"></i></a>
    <a href="#"><i class="fab fa-google"></i></a>
  </div>
</body>
</html>

CSS

body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:black;
}

.sm a{
  display:inline-block;
  font-size: 40px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color:#ffce00;
  margin: 0 16px;
  transition: .4s linear;
  position: relative;
  
}

.sm a::before, .sm a::after{
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: .4s linear;
}

.sm a:hover{
  transform: scale(.8);
}

.sm a:hover::before{
  border-left: 4px solid;
  border-right: 4px solid;
  transform: skewX(20deg);
}

.sm a:hover::after{
  border-top: 4px solid;
  border-bottom: 4px solid;
  transform: skewY(-20deg);
}

Daily Tech

Make cool social Icons using HTML and CSS

What are social media buttons?

How do these Pulsating buttons behave?

You might like these:

HTML

CSS

Post a Comment