Today, We are going to share a few beautiful and free CSS social media buttons. We created these buttons with the help of pure CSS3 only. It’s free to download and can use in the personal project.
These are nice looking but simple buttons which help you to enhance your web design. We did create them by using the font awesome icons and there is no need for an image.
There are many free social media icons are available over the internet but here I will share your custom created buttons with the help of CSS3 only.
You can easily customize in terms of color or iconbackground color. The purpose of used font icons is to provide less load on the website and cross-browser compatibility and consistent that can be applied to any kind of web design.
Moreover, We will create them in two different sizes and style them in two different ways. Although, You can change them as you want.
How to Create Social Media Buttons with CSS
The implementation of these social buttons is so easy. All you just need to put a class name according to style needs.
The set of buttons are added under the div class name cc-social. There are two styles of buttons flat or rouned. If you want to get the flat CSS buttons, You will require adding class name flat along with cc-social.
Similar if you want to show the circle buttons you just need to add a class name rounded along with cc-social.
Let’s have looked at a simple HTML code.
You have noticed a different class within the i an element that produces different styles of icon color, background color, and size of an icon.
The fa-facebook used to add the icon but We will also use this class to change the color of icons through the stylesheet.
The class fa-2x used to change the size of the icons. You can use fa-2x for small icons and for big icons fa-3x.
<div class="cc-social flat">
<h2>Flat Buttons</h2>
<ul>
<li><a href="#"><i class="fa fa-facebook fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-twitter fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-youtube fa-2x"></i></a></li>
</ul>
</div>The CSS Styles for Buttons
First, we will do some basic styling and apply general CSS to make them look nice.
/* General Style */
.cc-social {
margin: 0 auto 30px;
overflow: auto;
border-bottom: solid 4px #e01c99;
}
.cc-social ul {
list-style: none;
float: left;
padding: 0;
margin: 2em 0;
}
.cc-social ul li {
float: left;
margin-right:20px;
}
.cc-social ul li.last {
margin-right:0px;
}
.cc-social ul li i:hover{
background:#f9e5e5;
}There is isn’t much difference in creating flat and rounded buttons. All you need to apply border-radius property.
/* Buttons Shapes */
.cc-social.flat ul li i{
background: none repeat scroll 0 0 #fff;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
.cc-social.rouned ul li i{
background: none repeat scroll 0 0 #fff;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
border-radius: 25px;
}Each button has a different color for the social icon so we will apply it like this way.
/* Buttons Colors */
i.fa-facebook{
color: #3f5598;
}
i.fa-twitter{
color: #3ac1f8;
}
i.fa-youtube {
color: #da2d2e;
}
i.fa-instagram {
color: #66269e;
}
i.fa-linkedin {
color: #1c66c2;
}
i.fa-google-plus{
color: #000000;
}
i.fa-pinterest{
color: #e7163d;
}
Let’s apply to different sizes.
/* Buttons Sizes*/
.fa-2x {
font-size: 1.5em;
}
.fa-3x {
font-size: 2em;
}
When you implement these buttons, You need to add @FontFace which provide by font awesome. Although I have added these fonts in the download zip.