9+ Different Stylish Social Follow Button For Blogger Blog

Social follow buttons are an essential part of any modern Blogger blog because they help visitors connect with you on multiple social media platforms. 9+ different stylish social follow buttons add a professional look to your blog while increasing followers on Facebook, Twitter, Instagram, YouTube, and more. These buttons are lightweight, mobile-friendly, and easy to add using HTML and CSS, making them perfect for improving user engagement and brand visibility on your Blogger blog.

Outline Style Social Follow Button Widgets (1)

<style>

.social-outline{

display:flex;

gap:10px;

}

.social-outline a{

display:inline-block;

padding:8px 16px;

border:2px solid;

border-radius:8px;

color:#111;

font-weight:600;

text-decoration:none;

transition:0.3s;

}

.social-outline a.facebook{border-color:#1877f2;color:#1877f2;}

.social-outline a.twitter{border-color:#1da1f2;color:#1da1f2;}

.social-outline a.linkedin{border-color:#0077b5;color:#0077b5;}

.social-outline a.youtube{border-color:#ff0000;color:#ff0000;}

.social-outline a.instagram{border-color:#e4405f;color:#e4405f;}

.social-outline a:hover{background:#f0f0f0;}

</style>

<a href="#" class="facebook" target="_blank">Facebook</a>

<a href="#" class="twitter" target="_blank">Twitter</a>

<a href="#" class="linkedin" target="_blank">LinkedIn</a>

<a href="#" class="youtube" target="_blank">YouTube</a>

<a href="#" class="instagram" target="_blank">Instagram</a>

</div>

Rounded Buttons with Hover Style Social Follow Button Widgets(2)

<style>

.social-scale{

display:flex;

gap:10px;

}

.social-scale a{

display:inline-block;

padding:10px 16px;

color:#fff;

font-weight:600;

border-radius:50px;

text-decoration:none;

transition:0.3s transform;

}

.social-scale a.facebook{background:#1877f2;}

.social-scale a.twitter{background:#1da1f2;}

.social-scale a.linkedin{background:#0077b5;}

social-scale a.youtube{background:#ff0000;}

.social-scale a.instagram{background:#e4405f;}

.social-scale a:hover{transform:scale(1.1);}

</style>

<a href="#" class="facebook" target="_blank">Facebook</a>

<a href="#" class="twitter" target="_blank">Twitter</a>

<a href="#" class="linkedin" target="_blank">LinkedIn</a>

<a href="#" class="youtube" target="_blank">YouTube</a>

<a href="#" class="instagram" target="_blank">Instagram</a>

</div>

Gradient Buttons With Text Style Social Follow Button Widgets (3)

<style>

.social-gradient{

display:flex;

gap:10px;

}

.social-gradient a{

display:inline-block;

padding:8px 16px;

color:#fff;

font-weight:600;

text-decoration:none;

border-radius:12px;

transition:0.3s;

}

.social-gradient a.facebook{background:linear-gradient(45deg,#1877f2,#0f63e0);}

.social-gradient a.twitter{background:linear-gradient(45deg,#1da1f2,#0d95e8);}

.social-gradient a.linkedin{background:linear-gradient(45deg,#0077b5,#005582);}

.social-gradient a.youtube{background:linear-gradient(45deg,#ff0000,#cc0000);}

.social-gradient a.instagram{background:linear-gradient(45deg,#f58529,#e4405f);}

.social-gradient a:hover{opacity:0.85;}

</style>

<a href="#" class="facebook" target="_blank">Facebook</a>

<a href="#" class="twitter" target="_blank">Twitter</a>

<a href="#" class="linkedin" target="_blank">LinkedIn</a>

<a href="#" class="youtube" target="_blank">YouTube</a>

<a href="#" class="instagram" target="_blank">Instagram</a>

</div>

Floating Neon Circle Buttons Style Social Follow Button Widgets (4)

<style>

.social-neon{

display:flex;

gap:10px;

}

.social-neon a{

display:inline-block;

width:45px;

height:45px;

border-radius:50%;

text-align:center;

line-height:45px;

color:#fff;

font-size:20px;

text-shadow:0 0 5px #fff;

transition:0.3s;

}

.social-neon a.facebook{background:#1877f2;box-shadow:0 0 10px #1877f2;}

.social-neon a.twitter{background:#1da1f2;box-shadow:0 0 10px #1da1f2;}

.social-neon a.linkedin{background:#0077b5;box-shadow:0 0 10px #0077b5;}

.social-neon a.youtube{background:#ff0000;box-shadow:0 0 10px #ff0000;}

.social-neon a.instagram{background:#e4405f;box-shadow:0 0 10px #e4405f;}

.social-neon a:hover{transform:scale(1.2);}

</style>

</div>

White Rounded Style Social Follow Button Widgets (5)

<style>

.social-white-rounded{

display:flex;

gap:10px;

}

.social-white-rounded a{

display:inline-block;

padding:10px 18px;

border-radius:50px;

text-decoration:none;

font-weight:600;

border:2px solid transparent;

background:#ffffff;

color:#111;

transition:0.3s;

}

.social-white-rounded a.facebook{border-color:#1877f2;}

.social-white-rounded a.twitter{border-color:#1da1f2;}

.social-white-rounded a.linkedin{border-color:#0077b5;}

.social-white-rounded a.youtube{border-color:#ff0000;}

.social-white-rounded a.instagram{border-color:#e4405f;}

.social-white-rounded a:hover{background:#f3f4f6;}

</style>

<a href="#" class="facebook" target="_blank">Facebook</a>

<a href="#" class="twitter" target="_blank">Twitter</a>

<a href="#" class="linkedin" target="_blank">LinkedIn</a>

<a href="#" class="youtube" target="_blank">YouTube</a>

<a href="#" class="instagram" target="_blank">Instagram</a>

</div>

White Shadow Style Social Follow Button Widgets (6)

<style>

.social-white-shadow{

display:flex;

gap:10px;

}

.social-white-shadow a{

display:inline-block;

width:45px;

height:45px;

border-radius:50%;

text-align:center;

line-height:45px;

color:#111;

background:#fff;

border:1px solid #e5e7eb;

box-shadow:0 4px 10px rgba(0,0,0,.08);

font-weight:600;

transition:0.3s;

}

.social-white-shadow a.facebook{border-color:#1877f2;}

.social-white-shadow a.twitter{border-color:#1da1f2;}

.social-white-shadow a.linkedin{border-color:#0077b5;}

.social-white-shadow a.youtube{border-color:#ff0000;}

.social-white-shadow a.instagram{border-color:#e4405f;}

.social-white-shadow a:hover{transform:scale(1.1);}

</style>

</div>

Square Flat Button With Text Button Style Social Follow Button Widgets (7)

<style>

.social-flat{

display:flex;

gap:10px;

}

.social-flat a{

display:inline-block;

padding:8px 14px;

color:#fff;

text-decoration:none;

border-radius:6px;

font-weight:600;

transition:0.3s;

}

.social-flat a.facebook{background:#1877f2;}

.social-flat a.twitter{background:#1da1f2;}

.social-flat a.linkedin{background:#0077b5;}

.social-flat a.youtube{background:#ff0000;}

.social-flat a.instagram{background:#e4405f;}

.social-flat a:hover{opacity:0.85;}

</style>

<a href="#" class="facebook" target="_blank">Facebook</a>

<a href="#" class="twitter" target="_blank">Twitter</a>

<a href="#" class="linkedin" target="_blank">LinkedIn</a>

<a href="#" class="youtube" target="_blank">YouTube</a>

<a href="#" class="instagram" target="_blank">Instagram</a>

</div>

Simple Follow Outline Style Social Follow Button Widgets (8)

Stylish Rounded Outline Style Social Follow Button Widgets (9)

<style>

.new-follow-box {

text-align: center;

margin: 20px 0;

}

.new-follow-box h4 {

font-size: 16px;

font-weight: 600;

margin-bottom: 12px;

letter-spacing: 0.5px;

color: #333;

}

.new-follow-icons {

display: flex;

justify-content: center;

gap: 14px;

flex-wrap: wrap;

}

.new-follow-icons a {

width: 40px;

height: 40px;

border-radius: 12px;

display: flex;

align-items: center;

justify-content: center;

color: #fff;

font-weight: 600;

font-size: 15px;

text-decoration: none;

transition: all 0.25s ease;

box-shadow: 0 4px 12px rgba(0,0,0,0.1);

}

/* Brand Colors */

.new-follow-icons .fb { background: #1877f2; }

.new-follow-icons .x { background: #1c1c1c; }

.new-follow-icons .ig { background: #e1306c; } /* Instagram new pinkish */

.new-follow-icons .yt { background: #ff0000; }

.new-follow-icons .li { background: #0a66c2; }

/* Hover Effect */

.new-follow-icons a:hover {

transform: scale(1.15);

box-shadow: 0 8px 20px rgba(0,0,0,0.18);

}

</style>

<h4>Follow Us</h4>

</div>

White Background Outline Style Social Follow Button Widgets (10)

<style>

.follow-box-simple {

text-align: center;

margin: 18px 0;

}

.follow-box-simple h4 {

font-size: 15px;

font-weight: 600;

margin-bottom: 10px;

letter-spacing: 0.4px;

}

.follow-icons-simple {

display: flex;

justify-content: center;

gap: 12px;

}

.follow-icons-simple a {

width: 36px;

height: 36px;

background: #f3f4f6;

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

font-size: 14px;

color: #444;

text-decoration: none;

transition: background 0.2s ease;

}

.follow-icons-simple a:hover {

background: #e7e8ea;

}

</style>

<h4>Follow Us</h4>

</div>

How To Add Social Follow Button Widgets For Blogger Blog

Go to Layout → Add a Gadget → HTML/JavaScript. Paste your HTML and JavaScript code into the content box, save it, and arrange the widget where you want it to appear on your blog.

Qowenna

Search This Blog