How to create social media buttons using CSS?
The social media buttons are used to navigate to the respected social media page. These are commonly found on almost all websites. A Social media button is added with the respective social media icons with some customization using CSS.
Adding Social Media button
The Social Media button can be created using an HTML <a> tag. We will use CSS properties, so that <a> tag looks like a button. To add icons to it, we need to import the icon library within the style sheet. We can use Font Awesome icon library to add the icons.
Here is the syntax for adding font Awesome icons.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Other than that use the CSS properties like background-color , margin, padding, font-size to the <a> tag.
Example: Creating a Social Media Button using CSS
Here in the following example, we have created a button for the most popular social media app.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
a {
padding: 16px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 50px;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 50px;
}
.fa-linkedin {
background: #55AAEE;
color: white;
font-size: 50px;
}
</style>
</head>
<body>
<h2> Adding Social media icons </h2>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-linkedin"></a>
</body>
</html>
Output
Here is the output of the above program.
Example: Rounded bordered Social media buttons
We can use the border-radius property to add rounded corners to the buttons. Also, we can add :hover to the buttons. Here is a short example to add rounded bordered Social Media buttons.
Conclusion
We can customize the links to appear like buttons using CSS properties. We can also add the social media icon using the Font Awesome library. It has a collection of icons from which we can choose the required icon.
