How To Add Social Follow Button Like My Website

4.5/5 - (22 votes)

This article is all about how to add social follow buttons to a WordPress website or you can say how to add social icons in a WordPress website without plugins.

Contents In The Article hide

HTML Code

<img src="https://webinsights.in/wp-content/webpc-passthru.php?src=https://webinsights.in/wp-content/uploads/2021/06/services-banner1.png&nocache=1" class="myimg" alt="">
<p> <a href="#" target="_blank" class="social yt"> YouTube</a> </p>
<p> <a href="#" target="_blank" class="social fb"> Facebook</a> </p>
<p> <a href="#" target="_blank" class="social insta"> Insta</a> </p>

CSS Code

Paste below CSS Code to your additional CSS Box.

.myimg{
			max-width: 100%;
			margin-bottom:30px;
		}
		.social{
			background-color: #10b98e;
			padding: 10px;
			color:white;
			text-decoration: none;
			display: block;
			border-radius: 30px;
			text-align: center;
			font-size: 16px;
		
		}
		.social:hover{
			box-shadow: 1px 1px 8px #888888;
			color:white;
		}
		
		.social.fb{
			background-color:#4267B2;
			margin-top: -10px;
		}
		.social.yt{
			background-color:#c4302b;
			margin-top: -10px;
		}
		.social.insta{
			background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
			margin-top: -10px;
		}


Sharing Is Caring...

An aspiring MCA student formed an obsession with Blogging, SEO, Digital Marketing, and Helping Beginners To Build Amazing WordPress Websites.

4 thoughts on “How To Add Social Follow Button Like My Website”

  1. Please make a video on these awesome new floating share icons. and please tell me how I set featured image size differently on mobile phones using CSS like you.

    Reply

Leave a Comment

Limited Time Offer
21% Discount on Rank math Pro
10
days
10
hours
10
minutes
10
seconds
Hurry! The Offer Will Expire In
Limited Time Offer
21% Discount on Rank math Pro
10
days
10
hours
10
minutes
10
seconds
Hurry! The Offer Will Expire In
You This Coupon Code in Checkout
Click the code to Copy