Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a Share Button with different Social Handles using HTML and CSS?
To create share buttons with different social handles using HTML and CSS, we use basic CSS properties and HTML tags along with Font Awesome icons for professional-looking social media buttons.
In this article, we will create share buttons for Facebook, Twitter, LinkedIn, Pinterest, Reddit, and WhatsApp with their respective brand colors and hover effects.
Syntax
button {
background-color: brand-color;
border: 1px solid brand-color;
border-radius: radius;
color: white;
padding: value;
}
button:hover {
background-color: white;
color: brand-color;
}
Method 1: Creating HTML Structure
First, we create the HTML structure with a container and individual buttons for each social platform
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/704ff50790.js"
crossorigin="anonymous"></script>
<style>
.container {
display: flex;
gap: 10px;
margin-top: 20px;
}
.buttons {
border: none;
border-radius: 10px;
color: #fff;
cursor: pointer;
font-size: 20px;
padding: 12px 16px;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<h3>Social Share Buttons</h3>
<div class="container">
<button class="buttons facebook">
<i class="fab fa-facebook-f"></i>
</button>
<button class="buttons twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="buttons linkedin">
<i class="fab fa-linkedin-in"></i>
</button>
</div>
</body>
</html>
Three social media buttons (Facebook, Twitter, LinkedIn) displayed horizontally with their respective icons.
Method 2: Adding Brand Colors and Hover Effects
Now we add specific brand colors for each platform and create hover effects
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/704ff50790.js"
crossorigin="anonymous"></script>
<style>
.container {
display: flex;
gap: 10px;
margin-top: 20px;
}
.buttons {
border: none;
border-radius: 10px;
color: #fff;
cursor: pointer;
font-size: 20px;
padding: 12px 16px;
transition: all 0.3s ease;
}
.facebook {
background-color: #3b5998;
border: 1px solid #3b5998;
}
.facebook:hover {
background-color: white;
color: #3b5998;
}
.twitter {
background-color: #1da1f2;
border: 1px solid #1da1f2;
}
.twitter:hover {
background-color: white;
color: #1da1f2;
}
.linkedin {
background-color: #0077b5;
border: 1px solid #0077b5;
}
.linkedin:hover {
background-color: white;
color: #0077b5;
}
</style>
</head>
<body>
<h3>Social Share Buttons with Hover Effects</h3>
<div class="container">
<button class="buttons facebook">
<i class="fab fa-facebook-f"></i>
</button>
<button class="buttons twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="buttons linkedin">
<i class="fab fa-linkedin-in"></i>
</button>
</div>
</body>
</html>
Three social media buttons with brand colors (Facebook blue, Twitter blue, LinkedIn blue). When hovered, the background becomes white and the icon changes to the brand color.
Complete Example: All Social Media Platforms
Here's the complete implementation with all six social media platforms
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/704ff50790.js"
crossorigin="anonymous"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
display: flex;
gap: 10px;
margin-top: 20px;
flex-wrap: wrap;
}
.buttons {
border: none;
border-radius: 10px;
color: #fff;
cursor: pointer;
font-size: 20px;
padding: 12px 16px;
transition: all 0.3s ease;
}
.facebook {
background-color: #3b5998;
border: 1px solid #3b5998;
}
.facebook:hover {
background-color: white;
color: #3b5998;
}
.twitter {
background-color: #1da1f2;
border: 1px solid #1da1f2;
}
.twitter:hover {
background-color: white;
color: #1da1f2;
}
.linkedin {
background-color: #0077b5;
border: 1px solid #0077b5;
}
.linkedin:hover {
background-color: white;
color: #0077b5;
}
.pinterest {
background-color: #bd081c;
border: 1px solid #bd081c;
}
.pinterest:hover {
background-color: white;
color: #bd081c;
}
.reddit {
background-color: #ff4500;
border: 1px solid #ff4500;
}
.reddit:hover {
background-color: white;
color: #ff4500;
}
.whatsapp {
background-color: #25d366;
border: 1px solid #25d366;
}
.whatsapp:hover {
background-color: white;
color: #25d366;
}
</style>
</head>
<body>
<h3>Complete Social Share Buttons</h3>
<p>Hover over the buttons to see the interactive effects</p>
<div class="container">
<button class="buttons facebook">
<i class="fab fa-facebook-f"></i>
</button>
<button class="buttons twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="buttons linkedin">
<i class="fab fa-linkedin-in"></i>
</button>
<button class="buttons pinterest">
<i class="fab fa-pinterest"></i>
</button>
<button class="buttons reddit">
<i class="fab fa-reddit-alien"></i>
</button>
<button class="buttons whatsapp">
<i class="fab fa-whatsapp"></i>
</button>
</div>
</body>
</html>
Six social media share buttons arranged horizontally with their respective brand colors: Facebook (blue), Twitter (light blue), LinkedIn (dark blue), Pinterest (red), Reddit (orange), and WhatsApp (green). Each button displays smooth hover effects with inverted colors.
Key Features
- Flexbox Layout: Uses CSS flexbox for responsive horizontal arrangement
- Brand Colors: Each button uses authentic social media platform colors
- Hover Effects: Smooth color transitions on mouse hover
- Font Awesome Icons: Professional social media icons
- Responsive Design: Buttons wrap to next line on smaller screens
Conclusion
Social share buttons enhance user engagement by making content sharing effortless. The combination of CSS flexbox, brand colors, and Font Awesome icons creates professional-looking buttons that users recognize and trust.
Updated on: 2026-03-15T17:08:17+05:30
10K+ Views
Advertisements