Social Media Icons using HTML and CSS

In this article, we will create social media icons using HTML and CSS. Previously I have shared a Responsive Flip Card Design. Here I have used the hover effect on card and icons to make the design look attractive

 To create this, you need to create two files. One of them is an HTML file, and another one is the CSS file. Then copy the HTML and CSS code and paste it to the appropriate files and save them.

HTML Code:

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html lang="en" dir="ltr">
<!--www.codeithub.com-->
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
    <div class="card">
        <div class="wrapper">
            <div class="button">
                <div class="icon">
                    <i class="fab fa-facebook-f"></i>
                </div>
                <span>Facebook</span>
            </div>
            <div class="button">
                <div class="icon">
                    <i class="fab fa-twitter"></i>
                </div>
                <span>Twitter</span>
            </div>
            <div class="button">
                <div class="icon">
                    <i class="fab fa-instagram"></i>
                </div>
                <span>Instagram</span>
            </div>
            <div class="button">
                <div class="icon">
                    <i class="fab fa-youtube"></i>
                </div>
                <span>YouTube</span>
            </div>
            <div class="button">
                <div class="icon">
                    <i class="fab fa-github"></i>
                </div>
                <span>Github</span>
            </div>
        </div>
    </div>
</body>
</html>

CSS Code:

<!-- code by CodeitHub ( https://CodeitHub.com ) -->
@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected];700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 80%;
    height:80%;
    place-items: center;
    display:grid;
    background:linear-gradient(315deg, #e9eedd 0%, #131411 74%);
    border-radius: 14px;
  }
  
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: linear-gradient(315deg, #131411 0%, #e9eedd 74%);
}
.wrapper .button{
  display: inline-block;
  height: 60px;
  width: 60px;
  float: none;
  margin: 0 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease-out;
}
.wrapper .button:hover{
  width: 200px;
}
.wrapper .button .icon{
  display: inline-block;
  height: 60px;
  width: 60px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1):hover .icon{
  background: #4267B2;
}
.wrapper .button:nth-child(2):hover .icon{
  background: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{
  background: #E1306C;
}
.wrapper .button:nth-child(4):hover .icon{
  background: #333;
}
.wrapper .button:nth-child(5):hover .icon{
  background: #ff0000;
}
.wrapper .button .icon i{
  font-size: 25px;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
  color: #fff;
}
.wrapper .button span{
  font-size: 20px;
  font-weight: 500;
  line-height: 60px;
  margin-left: 10px;
  transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1) span{
  color: #4267B2;
}
.wrapper .button:nth-child(2) span{
  color: #1DA1F2;
}
.wrapper .button:nth-child(3) span{
  color: #E1306C;
}
.wrapper .button:nth-child(4) span{
  color: #333;
}
.wrapper .button:nth-child(5) span{
  color: #ff0000;
}

Leave a Reply

Your email address will not be published. Required fields are marked *