Animated Social Media Buttons using HTML & CSS

Animated Social Media Buttons using HTML & CSS

Hello developers, today in this blog, you'll learn to create Animated Social Media Buttons using HTML & CSS.

The Social links and buttons enable your website visitors and content viewers to easily share your content with their social media connections and networks. The social media buttons can be used on your website, to share your content with others.

In this blog (Animated Social Media Buttons), on the webpage, there are four social media buttons with their respective colors. When you click on the social media icons or button the animation will appear, that is the button will be animated like a pressed button.

The source code of this Animated Social Media button is given below if you want the source code of this program, you can copy it. You can use these Animated Social Media Buttons with your creativity and, can take this project to the next level.

Animated Social Media Buttons [Source Code]

To make this website (Animated Social Media Buttons), you need to create two files: an HTML file and a CSS file. First, create an HTML file with the name index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Animated Social Media Buttons || Learningrobo </title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> </head> <body> <div class="buttons"> <div class="row"> <button class="facebook"> <span><i class="fab fa-facebook-f"></i></span> Facebook</button> <button class="instagram"> <span><i class="fab fa-instagram"></i></span> Instagram</button> </div> <div class="row"> <button class="twitter"> <span><i class="fab fa-twitter"></i></span> Twitter</button> <button class="youtube"> <span><i class="fab fa-youtube"></i></span> YouTube</button> </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and, remember that you have to create a file with a .css extension.


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #FFB5C5;
}
.buttons{
  display: flex;
  width: 500px;
  height: 300px;
  align-items: center;
  justify-content: space-around;
}
.buttons .row{
  display: block;
 margin-left: 60px;
}
.buttons .row button{
  position: relative;
  display: block;
  height: 55px;
  width: 150px;
  margin: 40px 0;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 0 5px 5px 0;
  transition: all 0s ease-out;
}
.row button:active{
  top: 3px;
}
.row button.facebook,
.row button.facebook span{
  background: #3B5999;
  border-left: 1px solid #2E4476;
  box-shadow: 0px 5px 0px 0px #2E4476;
}
.row button.facebook:active{
  box-shadow: 0px 2px 0px 0px #2E4476;
}
.row button.twitter,
.row button.twitter span{
  background: #46C1F6;
  border-left: 1px solid #269BD0;
  box-shadow: 0px 5px 0px 0px #269BD0;
}
.row button.twitter:active{
  box-shadow: 0px 2px 0px 0px #269BD0;
}
.row button.instagram,
.row button.instagram span{
  background: #e1306c;
  border-left: 1px solid #c91d56;
  box-shadow: 0px 5px 0px 0px #c91d56;
}
.row button.instagram:active{
  box-shadow: 0px 2px 0px 0px #c91d56;
}
.row button.youtube,
.row button.youtube span{
  background: #DE463B;
  border-left: 1px solid #C02B21;
  box-shadow: 0px 5px 0px 0px #C02B21;
}
.row button.youtube:active{
  box-shadow: 0px 2px 0px 0px #C02B21;
}
.row button span{
  position: absolute;
  height: 55px;
  width: 60px;
  top: 0;
  left: -60px;
  line-height: 55px;
  font-size: 25px;
  display: block;
  font-weight: normal;
  border-radius: 5px 0 0 5px;
}
.row button:active span{
  top: -3px;
}
.row button.facebook span{
  border-right: 1px solid #2E4476;
}
.row button.twitter span{
  border-right: 1px solid #269BD0;
}
.row button.instagram span{
  border-right: 1px solid #c91d56;
}
.row button.youtube span{
  border-right: 1px solid #C02B21;
}
.row button.facebook:active span{
  box-shadow: 0px 5px 0px 0px #2E4476,
              6px 4px 2px rgba(0,0,0,0.3);
}
.row button.twitter:active span{
  box-shadow: 0px 5px 0px 0px #269BD0,
              6px 4px 2px rgba(0,0,0,0.3);
}
.row button.instagram:active span{
  box-shadow: 0px 5px 0px 0px #c91d56,
              6px 4px 2px rgba(0,0,0,0.3);
}
.row button.youtube:active span{
  box-shadow: 0px 5px 0px 0px #C02B21,
              6px 4px 2px rgba(0,0,0,0.3);
}

.credit{
    text-align: center;
    color: #000;
    margin-bottom: 0.5px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.credit a{
    text-decoration: none;
    color: #000;
    font-weight: bold;
}  
We hope you would like these Animated Social Media Buttons using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating these Animated Social Media Buttons using HTML & CSS, then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome
OnlineEditor
HTMLTools