Create CSS3 Fancy Social Buttons 4 different styles

If you’re looking for fancy social buttons look no further, there are 4 different styles in this snippet, copy and paste the code into your projects, feel free to use.

If you want, you can also beautify and brand them according to your business and website.

The effect of social sharing can bring very positive results. We’ve seen it ourselves even in niches that may not be too popular on Facebook, Instagram, etc.

HTML Code

<!-- buttons 1 -->
<div>
	<a href="#" class="social-1 fb"><i class="fab fa-facebook-f"></i></a>
	<a href="#" class="social-1 tw"><i class="fab fa-twitter"></i></a>
    <a href="#" class="social-1 gp"><i class="fab fa-google-plus-g"></i></a>
    <a href="#" class="social-1 in"><i class="fab fa-linkedin-in"></i></a>
    <a href="#" class="social-1 pi"><i class="fab fa-pinterest-p"></i></a>
    <a href="#" class="social-1 su"><i class="fab fa-stumbleupon"></i></a>
</div>
<!-- buttons 2 -->
<div>
	<a href="#" class="social-2 fb"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
	<a href="#" class="social-2 tw"><i class="fab fa-twitter"></i><span>Twitter</span></a>
    <a href="#" class="social-2 gp"><i class="fab fa-google-plus-g"></i><span>Google Plus</span></a>
    <a href="#" class="social-2 in"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
    <a href="#" class="social-2 pi"><i class="fab fa-pinterest-p"></i><span>Pinterest</span></a>
    <a href="#" class="social-2 su"><i class="fab fa-stumbleupon"></i><span>StumbleUpon</span></a>
</div>
<!-- buttons 3 -->
<div>
	<a href="#" class="social-3 fb"><i class="fab fa-facebook-f"></i>Facebook</a>
	<a href="#" class="social-3 tw"><i class="fab fa-twitter"></i>Twitter</a>
    <a href="#" class="social-3 gp"><i class="fab fa-google-plus-g"></i>Google Plus</a>
    <a href="#" class="social-3 in"><i class="fab fa-linkedin-in"></i>Linkedin</a>
    <a href="#" class="social-3 pi"><i class="fab fa-pinterest-p"></i>Pinterest</a>
    <a href="#" class="social-3 su"><i class="fab fa-stumbleupon"></i>StumbleUpon</a>
</div>
<!-- buttons 4 -->
<div>
	<a href="#" class="social-4 fb"><i class="fab fa-facebook-f"></i><span>Facebook</span></a>
	<a href="#" class="social-4 tw"><i class="fab fa-twitter"></i><span>Twitter</span></a>
    <a href="#" class="social-4 gp"><i class="fab fa-google-plus-g"></i><span>Google Plus</span></a>
    <a href="#" class="social-4 in"><i class="fab fa-linkedin-in"></i><span>Linkedin</span></a>
    <a href="#" class="social-4 pi"><i class="fab fa-pinterest-p"></i><span>Pinterest</span></a>
    <a href="#" class="social-4 su"><i class="fab fa-stumbleupon"></i><span>StumbleUpon</span></a>
</div>

CSS Code

@import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
html, body {
	padding: 20px;
    margin: 0;
    background: #f2f4f6;
    font-family: Verdana, Geneva, sans-serif;
}
a {
	box-sizing: border-box;
    margin-bottom: 10px;
    margin-right: 5px;
}
div {
	padding-bottom: 30px;
}
/* social background colors */
.fb { background-color: #4561A8; }
.tw { background-color: #17ADEA; }
.gp { background-color: #BF3B28; }
.in { background-color: #1679B1; }
.pi { background-color: #D9303C; }
.su { background-color: #E84930; }
/* buttons 1 */
.social-1 {
	text-decoration: none;
    color: #ffffff;
    display: inline-block;
    width: 60px;
    height: 60px;
    overflow: hidden;
}
.social-1 i {
	display: flex;
  	align-items: center;
  	justify-content: center;
    height: 100%;
}
.social-1:hover i {
	background-color: rgba(0,0,0,0.1);
    transform: scale(1.2);
    transition: all 0.2s;
}
/* buttons 2 */
.social-2 {
	text-decoration: none;
    color: #ffffff;
    display: inline-flex;
    height: 50px;
    overflow: hidden;
}
.social-2 i {
	display:flex;
  	align-items: center;
  	justify-content: center;
    height: 100%;
    width: 50px;
    background-color: rgba(0,0,0,0.1);
}
.social-2 span {
	display:flex;
  	align-items: center;
  	justify-content: center;
    padding: 0 30px;
    font-weight: bold;
    font-size: 14px;
}
.social-2:hover i {
	background-color: rgba(0,0,0,0.2);
    transition: all 0.2s;
}
.social-2:hover span {
	background-color: rgba(0,0,0,0.1);
    transition: all 0.2s;
}
/* buttons 3 */
.social-3 {
	text-decoration: none;
    color: #ffffff;
    display: inline-flex;
    height: 40px;
    overflow: hidden;
  	align-items: center;
  	justify-content: center;
    padding: 0 15px 4px 15px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.2);
}
.social-3 i {
	padding-right: 10px;
}
.social-3:hover {
	color: rgba(255,255,255,0.9);
}
/* buttons 4 */
.social-4 {
	text-decoration: none;
    color: #ffffff;
    display: inline-flex;
    height: 40px;
    overflow: hidden;
    border-radius: 20px;
}
.social-4 i {
	display:flex;
  	align-items: center;
  	justify-content: center;
    height: 100%;
    width: 40px;
    background-color: rgba(0,0,0,0.1);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.social-4 span {
	display:flex;
  	align-items: center;
  	justify-content: center;
    padding: 0 15px;
    font-weight: bold;
    font-size: 14px;
}
.social-4:hover i {
	background-color: rgba(0,0,0,0.2);
    transition: all 0.2s;
}

Which button do you like best?

RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply