Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to style social media buttons with CSS?
On a web page, you must have seen the social media buttons for Facebook, Twitter, Gmail, etc. We can easily design such buttons using CSS. For that, you need to also set the social media icons. Icons are placed on the button using the <i> element. Let us see how to style the social media buttons with CSS.
Set the CDN for the social media icons
To add the icons on the buttons on a web page, we have used the Font Awesome Icons. Include it on a web page using the <link> element −
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
Set the social media buttons
We have set three buttons using the <button> Element −
<button><i class="fa fa-facebook-f" style="color:#3B5998"></i></button> <button><i class="fa fa-twitter" style="color:#55ACEE"></i></button> <button><i class="fa fa-linkedin" style="color:#007bb5"></i></button>
Set the icons on the buttons
The icons are placed on the button using the <i> element. The <i> gets added under the <button> element. The <i> includes the Font Awesome Icon for Facebook, Twitter, and LinkedIn −
<button> <i class="fa fa-facebook-f" style="color:#3B5998"></i> </button>
For Facebook, the following icon is set −
fa fa-facebook-f
For Twitter, the following icon is set −
fa fa-twitter
For LinkedIn, the following icon is set −
fa fa-linkedin
Style the social media buttons
The buttons are styled using the border-radius property. This will make the buttons round. The height and width of the buttons are set using the height and width properties respectively −
button {
margin: 0px;
border-radius: 50%;
width: 120px;
height: 120px;
border: none;
padding: 15px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: 40px;
border:1px solid black;
}
Hover the social media buttons
The :hover selector is used to set properties on hovering the buttons −
button:hover {
background: black;
box-shadow: 5px 10px 18px rgb(20, 20, 20);
}
Example
The following is the code to style social media buttons with CSS −
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<style>
button {
margin: 0px;
border-radius: 50%;
width: 120px;
height: 120px;
border: none;
padding: 15px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: 40px;
border:1px solid black;
}
button:hover {
background: black;
box-shadow: 5px 10px 18px rgb(20, 20, 20);
}
</style>
</head>
<body>
<h1 style="text-align: center;">Social Media Buttons Example</h1>
<button><i class="fa fa-facebook-f" style="color:#3B5998"></i></button>
<button><i class="fa fa-twitter" style="color:#55ACEE"></i></button>
<button><i class="fa fa-linkedin" style="color:#007bb5"></i></button>
</body>
</html>
353 Views
