M/s VIKASH TECH - We Write Imaginations to Codes..!!

3D Social Media Buttons using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create 3D Social Media Buttons using only HTML & CSS.
The Social Media Links and Buttons let your website visitors and content viewers to easily share your content with their preferred social media connections and networks. Adding these buttons or links to your content allows you to expand the reach of your content to new audiences and make new visitors back to your website.
In this program (3D Social Media Buttons), on the webpage, there are four different social media networks buttons – Facebook, Twitter, Instagram, and YouTube with their icon or logo and when you click on a particular button, the button is clicked with 3D visualization which makes these buttons more attractive. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (3D Effect on Social Media Buttons).

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>3D Social Media Buttons | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </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>
</body>
</html>

CSS

@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;
}
.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);
}
Category :

Comments

No comments found.

….

FLAT 50% OFF

Latest Posts

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

How to verify an email address before sending emails?

Email marketing is a great way to reach your clients, but while sending emails from a mail service provider, its…

Templates - In Flask

Templates are the structure of a website. Here in Python Flask. templates are treated as the views, which means these…

%d bloggers like this: