How To Add Social Follow Button Like My Website

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 

1 HTML Code

2 CSS Code

HTML Code

<img src="https://webinsights.in/wp-content/uploads/2021/06/services-banner1.png" 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;
		}

Categories