How to Write Social Media Buttons

Learn how to create effective social media share buttons to enhance your online presence and engagement.

Social Media Buttons

We’ve designed multiple versions of social media share buttons to boost engagement and SEO: inline buttons, icon-based circular buttons, rectangular icon buttons, and a sticky floating sidebar. These share buttons are compatible with all major platforms, including Facebook, Twitter, LinkedIn, Pinterest, WhatsApp, Reddit, and Email. You can easily embed them into websites built with WordPress (via Custom HTML or theme editor), Wix (using Embed Code blocks), Hostinger Website Builder, or any custom HTML/CSS project. Enhance your site’s interactivity and social reach with clean, responsive, mobile-friendly button designs that are easy to install and customize.

How to Write Social Media Button Codes

<!DOCTYPE html>

<head>

<title>Social Share Buttons</title>

<style>

.share-buttons {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

padding: 10px;

}

.share-buttons a {

display: inline-block;

padding: 10px 20px;

margin: 5px;

text-decoration: none;

color: white;

border-radius: 5px;

font-family: Arial, sans-serif;

font-size: 14px;

text-align: center;

width: 120px;

}

.share-facebook { background-color: #3b5998; }

.share-twitter { background-color: #1da1f2; }

.share-linkedin { background-color: #0077b5; }

.share-pinterest { background-color: #bd081c; }

.share-whatsapp { background-color: #25d366; }

.share-email { background-color: #d44638; }

.share-reddit { background-color: #ff4500; }

.share-buttons a:hover {

opacity: 0.9;

}

</style>

</head>

<body>

<a class="share-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://www.domain.com" target="_blank">Facebook</a>

<a class="share-twitter" href="https://twitter.com/intent/tweet?url=https://www.domain.com" target="_blank">Twitter</a>

<a class="share-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.domain.com" target="_blank">LinkedIn</a>

<a class="share-pinterest" href="https://pinterest.com/pin/create/button/?url=https://www.domain.com" target="_blank">Pinterest</a>

<a class="share-whatsapp" href="https://api.whatsapp.com/send?text=https://www.domain.com" target="_blank">WhatsApp</a>

<a class="share-email" href="mailto:?subject=Check this out&body=https://www.domain.com" target="_blank">Email</a>

<a class="share-reddit" href="https://reddit.com/submit?url=https://www.domain.com" target="_blank">Reddit</a>

</div>

</body>

</html>

The Code Will Look Like:

🔧 Customization Tips:

Change https://www.usadmission.net to your actual page or article URL.
You can insert this into any .html file or embed it in a WordPress site using a Custom HTML block.

How to Write Social Media Button Codes

<!DOCTYPE html>

<head>

<title>Share This Page</title>

<style>

.share-buttons {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

padding: 10px;

}

.share-buttons a {

display: inline-block;

padding: 10px 20px;

margin: 5px;

text-decoration: none;

color: white;

border-radius: 5px;

font-family: Arial, sans-serif;

font-size: 14px;

text-align: center;

width: 120px;

}

.share-facebook { background-color: #3b5998; }

.share-twitter { background-color: #1da1f2; }

.share-linkedin { background-color: #0077b5; }

.share-pinterest { background-color: #bd081c; }

.share-whatsapp { background-color: #25d366; }

.share-email { background-color: #d44638; }

.share-reddit { background-color: #ff4500; }

.share-buttons a:hover {

opacity: 0.9;

}

</style>

</head>

<body>

<a class="share-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://focusinsight.net/mohammad-sa" target="_blank">Facebook</a>

<a class="share-twitter" href="https://twitter.com/intent/tweet?url=https://focusinsight.net/mohammad-sa" target="_blank">Twitter</a>

<a class="share-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https://focusinsight.net/mohammad-sa" target="_blank">LinkedIn</a>

<a class="share-pinterest" href="https://pinterest.com/pin/create/button/?url=https://focusinsight.net/mohammad-sa" target="_blank">Pinterest</a>

<a class="share-whatsapp" href="https://api.whatsapp.com/send?text=https://focusinsight.net/mohammad-sa" target="_blank">WhatsApp</a>

<a class="share-email" href="mailto:?subject=Check this out&body=https://focusinsight.net/mohammad-sa" target="_blank">Email</a>

<a class="share-reddit" href="https://reddit.com/submit?url=https://focusinsight.net/mohammad-sa" target="_blank">Reddit</a>

</div>

</body>

</html>

The Code Will Look Like:

What to write the social media buttons code for a real scenario;

url: https://focusinsight.net/mohammad-sa

With real URL: https://focusinsight.net/mohammad-sa

How to Write Social Media Button Codes

<!DOCTYPE html>

<head>

<title>Share This Page</title>

<style>

.share-buttons {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 10px;

padding: 10px;

}

.share-buttons a {

display: flex;

align-items: center;

justify-content: center;

width: 50px;

height: 50px;

color: white;

border-radius: 50%;

font-size: 20px;

text-decoration: none;

}

.share-facebook { background-color: #3b5998; }

.share-twitter { background-color: #1da1f2; }

.share-linkedin { background-color: #0077b5; }

.share-pinterest { background-color: #bd081c; }

.share-whatsapp { background-color: #25d366; }

.share-email { background-color: #d44638; }

.share-reddit { background-color: #ff4500; }

.share-buttons a:hover {

opacity: 0.85;

}

</style>

</head>

<body>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

</body>

</html>

The Buttons Will Look Like:

What to write the social media buttons code for a real scenario;

url: https://focusinsight.net/mohammad-sa

With real URL: https://focusinsight.net/mohammad-sa

Circular and icon-based social media share buttons

You can make necessary changes in margin, padding, domain, etc.

How to Write Social Media Button Codes: Rectangular Icon-Based Share Buttons

<!DOCTYPE html>

<head>

<title>Share This Page</title>

<style>

.share-buttons {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 10px;

padding: 10px;

}

.share-buttons a {

display: flex;

align-items: center;

justify-content: center;

width: 90px;

height: 50px;

color: white;

border-radius: 8px; /* Rectangle with soft corners */

font-size: 20px;

text-decoration: none;

}

.share-facebook { background-color: #3b5998; }

.share-twitter { background-color: #1da1f2; }

.share-linkedin { background-color: #0077b5; }

.share-pinterest { background-color: #bd081c; }

.share-whatsapp { background-color: #25d366; }

.share-email { background-color: #d44638; }

.share-reddit { background-color: #ff4500; }

.share-buttons a:hover {

opacity: 0.85;

}

</style>

</head>

<body>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

</body>

</html>

The Buttons Will Look Like:

What to write the social media buttons code for a real scenario;

url: https://focusinsight.net/mohammad-sa

With real URL: https://focusinsight.net/mohammad-sa

Circular and icon-based social media share buttons

You can make necessary changes in margin, padding, domain, etc.

✅ Key Changes made:

border-radius: 8px instead of 50% (rectangle with rounded corners)
width: 100px for a clear rectangular shape

✅ Rectangular Icon-Based Social Media Share Buttons

How to Write Social Media Button Codes: Rectangular Icon-Based Share Buttons

<!DOCTYPE html>

<head>

<title>Share This Page</title>

<style>

.share-buttons {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 10px;

padding: 10px;

}

.share-buttons a {

display: flex;

align-items: center;

justify-content: center;

width: 90px;

height: 50px;

color: white;

border-radius: 8px; /* Rectangle with soft corners */

font-size: 20px;

text-decoration: none;

}

.share-facebook { background-color: #3b5998; }

.share-twitter { background-color: #1da1f2; }

.share-linkedin { background-color: #0077b5; }

.share-pinterest { background-color: #bd081c; }

.share-whatsapp { background-color: #25d366; }

.share-email { background-color: #d44638; }

.share-reddit { background-color: #ff4500; }

.share-buttons a:hover {

opacity: 0.85;

}

</style>

</head>

<body>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

</body>

</html>

The Buttons Will Look Like:

What to write the social media buttons code for a real scenario;

url: https://focusinsight.net/mohammad-sa

With real URL: https://focusinsight.net/mohammad-sa

Circular and icon-based social media share buttons

You can make necessary changes in margin, padding, domain, etc.

✅ What's Included:

A gray "share" button as a placeholder using <i class="fas fa-share-alt"></i>
Fully rectangular icon buttons for 7 platforms

✅ Full HTML Code: Rectangular Icon-Based Share Buttons with Placeholder

How to Write Social Media Button Codes: Floating Sidebar Social Buttons

<style>

.floating-share {

position: fixed;

top: 0;

left: 0;

height: 100vh;

width: 50px;

background: ;

display: flex;

flex-direction: column;

justify-content: space-evenly;

align-items: center;

z-index: 999;

}

.floating-share a {

display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

margin: 6px 0;

color: white;

text-decoration: none;

font-size: 18px;

border-radius: 5px;

}

.share-facebook { background-color: #3b5998; }

.share-twitter { background-color: #1da1f2; }

.share-linkedin { background-color: #0077b5; }

.share-pinterest { background-color: #bd081c; }

.share-whatsapp { background-color: #25d366; }

.share-email { background-color: #d44638; }

.share-reddit { background-color: #ff4500; }

.floating-share a:hover {

opacity: 0.9;

}

</style>

</div>

The buttons Will Look Like:

What to write the social media buttons code for a real scenario;

url: https://focusinsight.net/mohammad-sa

With real URL: https://focusinsight.net/mohammad-sa

Floating Sidebar Social Buttons

Floating Sidebar Social Buttons codes

Guidance

Your path to studying in the USA.

cONTACT

Support

bee@usadmission.net

Go Up