Hello readers, Today in this blog you’ll learn how to create 3D Social Media Buttons using only HTML & CSS. Previously I have shared a blog on how to create the Social Media Buttons with Tooltip on Hover and now I’m going to 3D Effect on Social Media Buttons.
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).
Video Tutorial of 3D Social Media Buttons
In the video, you have seen the 3D Click Effect on Social Media Buttons and I hope you’ve understood the basic codes behind creating these buttons and their 3D effect too. This is a pure CSS program that means I used only HTML & CSS so if you’re a beginner then you can also create these types of buttons and effects.
You can add <a href=”your site URL here”> tag inside each button to redirect the user to your particular preferred social network site/account on button click. You can easily get the source codes of this program (3D Social Media Buttons). To get the source codes you just need to scroll down. You can use these Social Media Buttons in your HTML pages, websites, and projects.
You might like this:
3D Social Media Buttons [Source Codes]
To create this program (Social Media Buttons with Tooltip). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>3D Social Media Buttons | CodingNepal</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>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .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;
}
.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);
}
That’s all, now you’ve successfully created 3D Social Media Buttons using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.
