Hi! In this article I've come up with 5 modern sets of black and white social media icons using pure css3 and html code. As social media plays major role in creating brand awareness, one cannot overlook the importance of implementing social sharing buttons in their websites. And this article is going to help you with five different styles of social icons to use in your websites. Moreover these icons are built without using images which will improve your website's loading speed too.
Like my earlier tutorials on pure css social media icons, this post too will use font awesome library. Font Awesome is a scalable vector font library and its icons can be easily customized using css to fit with the rest of your website's theme. It is originally developed for bootstrap but works great with all the other frameworks and even with plain html.
Load Font Awesome Library in HTML File
To use these css social media icons you need font awesome library. Use this line of code inside <head></head> section to load font awesome in the html file.
<link type="text/css" rel="stylesheet" href="path-to-fontawesome/font-awesome.css">
You can either download font awesome and use it locally or link directly from cdn. Check its official website to learn more.
The HTML Code for Social Media Icons
The html markup for including the social sharing buttons will be the same for all the 5 different styles discussed in this post. Only their css code will vary. So use this html code wherever you want to add social icons in your website along with the css code given in this article.
<div class="socialbtns"> <ul> <li><a href="#" class="fa fa-lg fa-facebook"></a></li> <li><a href="#" class="fa fa-lg fa-twitter"></a></li> <li><a href="#" class="fa fa-lg fa-google-plus"></a></li> <li><a href="#" class="fa fa-lg fa-github"></a></li> <li><a href="#" class="fa fa-lg fa-pinterest"></a></li> <li><a href="#" class="fa fa-lg fa-linkedin"></a></li> <li><a href="#" class="fa fa-lg fa-instagram"></a></li> <li><a href="#" class="fa fa-lg fa-vimeo-square"></a></li> <li><a href="#" class="fa fa-lg fa-stack-overflow"></a></li> <li><a href="#" class="fa fa-lg fa-dropbox"></a></li> <li><a href="#" class="fa fa-lg fa-tumblr"></a></li> <li><a href="#" class="fa fa-lg fa-envelope"></a></li> <li><a href="#" class="fa fa-lg fa-flickr"></a></li> <li><a href="#" class="fa fa-lg fa-bitbucket"></a></li> <li><a href="#" class="fa fa-lg fa-dribbble"></a></li> <li><a href="#" class="fa fa-lg fa-search"></a></li> <li><a href="#" class="fa fa-lg fa-skype"></a></li> <li><a href="#" class="fa fa-lg fa-stack-exchange"></a></li> <li><a href="#" class="fa fa-lg fa-youtube"></a></li> <li><a href="#" class="fa fa-lg fa-xing"></a></li> <li><a href="#" class="fa fa-lg fa-rss"></a></li> <li><a href="#" class="fa fa-lg fa-foursquare"></a></li> <li><a href="#" class="fa fa-lg fa-youtube-play"></a></li> <li><a href="#" class="fa fa-lg fa-cloud"></a></li> </ul> </div>
The above markup will add an unordered list of links. Now we have to style these plain looking icons with css.
The CSS Code for Social Media Icons
As I already said, these are highly customizable icons. Adding a few lines of css code will turn these icons into some unique style. Here goes the trick.
Style 1 - Black and White Minimal Social Media Icons
The first style is the minimal looking black and white social media icons. As the name implies, these are very stylish and minimal looking icons set that gives a clean and elegant look to your website. All these icons will simply be outlined in black color and the inner portion gives a hollow appearance. On mouse hover they will gradually ease into solid black icons. I have used multiple text shadows to bring out the outline effect to icons and css3 transition property to guarantee smooth animation effect to them.
Here goes the css code for minimal social media icons.
/* minimal sm icons */
a, a:hover {
color: #000;
text-decoration: none;
padding: 5px;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
color: #FFF;
text-shadow: 1px 1px 0px #000,
1px -1px 0px #000,
-1px 1px 0px #000,
-1px -1px 0px #000;
-webkit-text-shadow: 1px 1px 0px #000,
1px -1px 0px #000,
-1px 1px 0px #000,
-1px -1px 0px #000;
-moz-text-shadow: 1px 1px 0px #000,
1px -1px 0px #000,
-1px 1px 0px #000,
-1px -1px 0px #000;
-o-text-shadow: 1px 1px 0px #000,
1px -1px 0px #000,
-1px 1px 0px #000,
-1px -1px 0px #000;
transition: all ease-out 0.5s;
-moz-transition: all ease-out 0.5s;
-webkit-transition: all ease-out 0.5s;
-o-transition: all ease-out 0.5s;
}
.socialbtns .fa:hover {
color: #000;
text-shadow: 1px 1px 0px #fff,
1px -1px 0px #fff,
-1px 1px 0px #fff,
-1px -1px 0px #fff;
-webkit-text-shadow: 1px 1px 0px #fff,
1px -1px 0px #fff,
-1px 1px 0px #fff,
-1px -1px 0px #fff;
-moz-text-shadow: 1px 1px 0px #fff,
1px -1px 0px #fff,
-1px 1px 0px #fff,
-1px -1px 0px #fff;
-o-text-shadow: 1px 1px 0px #fff,
1px -1px 0px #fff,
-1px 1px 0px #fff,
-1px -1px 0px #fff;
transition: all ease 0.5s;
-moz-transition: all ease-in 0.5s;
-webkit-transition: all ease-in 0.5s;
-o-transition: all ease-in 0.5s;
}
Style 2 - Classic Square Black and White Social Media Icons
The second style is of a classic square icons set with white logo against solid black background. The square icons will ease into circle with smooth transition on hover. By increasing the border radius property of all the four corners of the icons, we can easily turn the square button into a circular one. The css transition will ensure you a smooth animation effect. Here goes the css code for the square social icons.
/* square sm icons */
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #FFF;
background-color: #000;
padding-top: 12px;
transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
}
.socialbtns .fa:hover {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
}
Style 3 - Black and White Rounded Social Media Icons
This is another one interesting style of icons set. Rounded Social Media Icons are always alluring and being black and white round icons, these are no exceptions to that. The icons are circular in shape with white logo against black background color and on mouse hover they will zoom out from the rest of the icons. This zooming effect is generated by scaling up the icon by one third of its size. Even at the bigger size these icons will look awesome. Adding smooth animation just gives you an illusion as though these icons zoom in and out without hitches. Here goes the css for these rounded social media icons.
/* round sm icons */
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li{
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #FFF;
background-color: #000;
padding-top: 12px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
}
.socialbtns .fa:hover {
transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
}
Style 4 - Hollow Social Media Icons with Outer Ring
These hollow looking icons are somewhat similar to the third style but without solid fill of black color, these icons will give you a hollow effect with black outer ring. On mouse hover, it fills out beautifully with solid black background color. Here is the css code for it.
/* hollow sm icons */
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #000;
background-color: #FFF;
border: 1px solid #000;
padding-top: 12px;
border-radius: 22px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-o-border-radius: 22px;
}
.socialbtns .fa:hover {
color: #FFF;
background-color: #000;
border: 1px solid #000;
}
Style 5 - Black and White Spinning Social Media Icons
Here goes the crazy stuff. Yep! The final set is of spinning social media icons in black and white. This is a beautiful pack of flat and round social media icons which on mouse hover, spin off 360 degree and ease out in the reverse direction when the mouse pointer leaves the icon. The css3 transform property ensures a smooth rotation of the icons that spin in clockwise and anti-clockwise direction. Here is the css code for spinning social media icons.
/* spinning sm icons */
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
color: #FFF;
background-color: #000;
width: 40px;
height: 28px;
padding-top: 12px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
}
.socialbtns .fa:hover {
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
I have included more than 25 social sharing icons here for you to pick out. Just remember, including too many social sharing buttons will confuse the reader. So choose wisely where your websites audience hang out most.
Read Also- Adding Social Media Icons in Bootstrap 3 | How-To Guide
- How to Create Round Social Media Icons using Pure CSS
I hope you love these black and white social media icons collections.
Thanks
ReplyDelete