Start creating your social media sharing buttons
This field is required
(Optinal for Twitter, Pinterest , Buffer & Linkedin only)
(Optinal for Pinterest only)
Buttons HTML
<!-- Copy FontAwesome library link in your html head
for social media icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />// Facebook Button
<a href="https://www.facebook.com/sharer/sharer.php?u=%2F&src=sdkpreparse" class="facebook-btn btn">
<span class= "icon-sl" >
<i class="fab fa-facebook-f"></i>
</span>
</a>// Twitter Button
<a href="https://twitter.com/intent/tweet?url=&text=" class="twitter-btn btn">
<span class= "icon-sl" >
<i class="fab fa-twitter"></i>
</span>
</a>// Pinterest Button
<a href="http://pinterest.com/pin/create/button/?url=&media=&description=" class="pinterest-btn btn">
<span class= "icon-sl" >
<i class="fab fa-pinterest-p"></i>
</span>
</a>// Linkedin Button
<a href="https://www.linkedin.com/sharing/share-offsite/?url=&title=" class="linkedin-btn btn">
<span class= "icon-sl" >
<i class="fab fa-linkedin-in"></i>
</span>
</a>// Reddit Button
<a href="https://www.reddit.com/submit?url=" class="reddit-btn btn">
<span class= "icon-sl" >
<i class="fab fa-reddit-alien"></i>
</span>
</a>// Tumblr Button
<a href="http://www.tumblr.com/share?v=3&u=&t=" class="tumblr-btn btn">
<span class= "icon-sl" >
<i class="fab fa-tumblr"></i>
</span>
Tumblr
</a>// Google+ Button
<a href="https://plus.google.com/share?url=" class="google-plus-btn btn">
<span class= "icon-sl" >
<i class="fab fa-google-plus-g"></i>
</span>
Google+
</a>// Buffer Button
<a href="http://bufferapp.com/add?text=&url=" class="buffer-btn btn">
<span class= "icon-sl" >
<i class="fab fa-buffer"></i>
</span>
Buffer
</a>// Email Button
<a href="mailto:info@example.com?&subject=&cc=&bcc=&body=%0A" class="email-btn btn">
<span class= "icon-sl" >
<i class="fas fa-envelope"></i>
</span>
</a>
Copy all this code into your .html File
Buttons CSS
/* For All Icons*/
.icon-sl {
margin: 0.3em;
}
/* For All icons Hover*/
.btn:hover {
opacity: 0.8;
}/* Facebook */
.facebook-btn {
background:#3b5998
color: white;
border-radius:1.5em
text-decoration: none;
display: inline-block;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
white-space: nowrap;
text-align: center;
}/* Twitter */
.twitter-btn {
background:#1da1f2
color: white;
border-radius:1.5em
text-decoration: none;
display: inline-block;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
white-space: nowrap;
text-align: center;
}/* Pinterest */
.pinterest-btn {
background:#E60023
color: white;
border-radius:1.5em
text-decoration: none;
display: inline-block;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
white-space: nowrap;
text-align: center;
}/* Linkedin */
.linkedin-btn {
background:#0e76a8
color: white;
border-radius:1.5em
text-decoration: none;
display: inline-block;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
white-space: nowrap;
text-align: center;
}/* Reddit */
.reddit-btn {
background:#ff4500
color: white;
border-radius:1.5em
text-decoration: none;
display: inline-block;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
white-space: nowrap;
text-align: center;
}/* Tumblr */
.tumblr-btn {
background:#35465c
color: white;
border-radius:1.5em
text-decoration: none;
display: inline-block;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
white-space: nowrap;
text-align: center;
}/* Google+ */
.google-plus-btn {
background:#db4a39
color: white;
border-radius:1.5em
text-decoration: none;
display: inline-block;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
white-space: nowrap;
text-align: center;
}/* Buffer */
.buffer-btn {
background:#168eea
color: white;
border-radius:1.5em
text-decoration: none;
display: inline-block;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
white-space: nowrap;
text-align: center;
}/* Email */
.email-btn {
background:#0e76a8
color: white;
border-radius:1.5em
text-decoration: none;
display: inline-block;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
white-space: nowrap;
text-align: center;
}
Copy all this code into your .CSS File
Frequently Asked QuestionsHow Does Share Buttons Creator Work?
- The Share buttons Creator tool very easy to use. Just type the URL of the website page or blog, image, video, etc., into the "URL" input, and it's required or your link will not work.
- Add any text you want to, "Text" input (Works for Twitter, Pinterest, Buffer & Linkedin only).
- And for Pinterest, only you can add a thumbnail image in "Thumbnail image URl" input, don't forget "TEXT" and "Thumbnail image URL" is optional.
- Choose your button and icon shape and size.
- Click "Show Buttons" to see how your social media sharing buttons will look like.
- When you're done you will have custom share buttons HTML code and CSS code.
- Copy the HTML code in your
.htmlfile, and the CSS in.cssfile. - Note do not change
Classnames because then you will have to change your css names also.
Why Create Social Media Share Buttons?
Social Media Share Buttons create buttons for social media networks and do not use JAVASCRIPT and allow instant sharing without having to use social media sharing scripts provided by the social media networks themselves, Without using plugins that slow your website speed, and track your users and make a lot of HTTP requests.
Making it easy for your users to simply share your website content. generate your own social media share buttons for your Website [NO JAVASCRIPT] and only one HTTP request, say goodbye to plugins that drain your website speed, and make a lot of requests and tracking.
You can also Check Out Our Social Media Sharing Links Generator Tool, And Check Out Our Social Media Colors Tool.