Social media buttons are an essential element of modern web design. They allow users to quickly and easily connect with a brand or business on their preferred social media platform. In this tutorial, we’ll learn how to create professional-looking social media buttons using HTML and CSS.
The project was a part of our 15 Days – 15 Projects series. You can follow us on Github. By the end of this tutorial, you’ll have a solid understanding of how to add social media buttons to your own web projects and customize them to match your brand’s style and color scheme. So let’s get started!
Preview (Social Media Buttons HTML & CSS)
HTML
<div class="wrapper">
<h2 class="title">Social Media Buttons</h2>
<div class="socialicons">
<a href="#" title="Facebook" class="icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" title="Twitter" class="icon"><i class="fab fa-twitter"></i></a>
<a href="#" title="Instagram" class="icon"><i class="fab fa-instagram"></i></a>
<a href="#" title="GitHub" class="icon"><i class="fab fa-github"></i></a>
<a href="#" title="LinkedIn" class="icon"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>This HTML code creates a wrapper element that contains a heading element with a class of “title” and a div element with a class of socialicons. Inside the socialicons div, there are five anchor elements with a class of “icon”. Each anchor element contains an i element with a specific Font Awesome class that corresponds to a particular social media platform (e.g. “fab fa-facebook-f” for Facebook).
The anchor elements have a “href” attribute set to “#” and a “title” attribute that specifies the name of the social media platform. The combination of the “icon” class and the Font Awesome class gives each social media button a specific style and appearance.
By wrapping the social media buttons in a div element with a class of “socialicons”, we can easily apply styles to all of the icons as a group. This can be useful if we want to set a consistent size, color, or hover effect for all of the icons.
Don’t forget to include the CDN js file for Font Awesome icons. Here is the code 👇 or get the latest from CDN directory.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.title {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
}
.socialicons {
display: flex;
margin-top: 100px;
}
.socialicons .icon{
width: 80px;
height: 80px;
box-shadow: 0 0 5px 10px rgba(0,0,0,0.05);
margin: 0 30px;
text-align: center;
line-height: 80px;
font-size: 30px;
text-decoration: none;
color: #000;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.icon:after {
content: '';
width: 80px;
height: 80px;
z-index: -1;
position: absolute;
bottom: -80px;
left: 0;
background: linear-gradient(to bottom, rgb(158, 0, 231), rgb(57,1,211));
transition: 0.2s;
}
.socialicons .icon:hover {
color: #fff;
}
a:hover::after {
bottom: 0;
}Using social media buttons can help users easily connect with your brand or business on their preferred platform, and they can also help to give your website a modern and cohesive look and feel. Just remember to consider the size, placement, and overall aesthetic of your icons when adding them to your web projects, and to choose a consistent set of icons that match your brand’s style and colors.
I hope you found this tutorial helpful and that you feel confident in your ability to create and customize social media buttons using HTML and CSS. If you have any questions or would like to learn more about web development, there are many excellent resources available on our website.
Read our other blogs that are part of the 15 Days – 15 projects Series
- Create Rock Paper Scissors with JavaScript
- To-Do List with JavaScript
- Build your own digital clock with JavaScript and DOM manipulation
Happy Coding! 😃
