How to create Social Icons with CSS?

           , , , ,      No comments   
How to create social media icons with the help of CSS coding.

There are several third party tools or websites which are offering social media icons with a simple click.

Do you think that why they are offering you free service?

I hope you don't bother about this. But, I have few reason behind these free offerings.

Why we should create our social icons?

As per my observation, these below are top reasons that we should not use third party social icons on our websites/blogs.

And we should try to create our own social icons.
  1. Slowdown Host website
  2. Automatically gives Backlink to their website
  3. Add dofollow link for their websites (A thought)

However, I too, use these free services on my blogs but most of the time I use self created social media icons on my website.

So in this post, I am going to discus an easy way to create social media icons.

And all you can do with the help of little knowledge of CSS coding.

Don't worry, if you don't know about CSS, I will explain to you. Learning CSS is very easy and interesting too.

Create Social Media Icons

<html>
<head>
<style type="text/css">
#youtube 
{
  background-image: url(youtube.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
background-origin: border-box;

  display: inline-block; 
  width: 100px; 
  height: 100px;
  border-width: 50px;
  border-color: rgba(0,0,0,0);

  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: 2s ease;
  -moz-transition: 2s ease;
  -ms-transition: 2s ease;
  -o-transition: 2s ease;
  transition: 2s ease;
}

 #youtube:hover 
{
  border-width: 0;
  border-color: rgba(0, 0, 0, 0.5);
}
#facebook 
{
  background-image: url(facebook.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-origin: border-box;

  display: inline-block; 
  width: 100px; 
  height: 100px;
  border-width: 50px;
  border-color: rgba(0,0,0,0);

  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: 2s ease;
  -moz-transition: 2s ease;
  -ms-transition: 2s ease;
  -o-transition: 2s ease;
  transition: 2s ease;
}

 #facebook:hover 
{
  border-width: 0;
  border-color: rgba(0, 0, 0, 0.5);
}
#twitter 
{
background-image: url(twitter.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-origin: border-box;

  display: inline-block; 
  width: 100px; 
  height: 100px;
  border-width: 50px;
  border-color: rgba(0,0,0,0);

  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: 2s ease;
  -moz-transition: 2s ease;
  -ms-transition: 2s ease;
  -o-transition: 2s ease;
  transition: 2s ease;
}
#twitter:hover 
{
border-width: 0;
border-color: rgba(0, 0, 0, 0.5);
}
#pinterest 
{
  background-image: url(pinterest.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-origin: border-box;

  display: inline-block; 
  width: 100px; 
  height: 100px;
  border-width: 50px;
  border-color: rgba(0,0,0,0);

  border-radius: 100%;
   -moz-border-radius: 100%;
  -webkit-border-radius: 100%;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 
  -webkit-transition: 2s ease;
  -moz-transition: 2s ease;
  -ms-transition: 2s ease;
  -o-transition: 2s ease;
  transition: 2s ease;
}
#pinterest:hover 
{
  border-width: 0;
  border-color: rgba(0, 0, 0, 0.5);
}
.icon_one
{
  border-style: inset;
}
.icon_two
{
  border-style: outset;
}
.icon_three
{
  border-style: groove;
}
.icon_four
{
  border-style: ridge;
}
</style>
</head>
<body>
<div href="#" class="icon_one" id="youtube"></div>
<div href="#" class="icon_two" id="facebook"> </div>
<div href="#" class="icon_three" id="twitter"></div>
<div href="#" class="icon_four" id="pinterest"></div>
</body>
</html>


Copy and paste above CSS coding in our latest Online Editor for 2015 to check output live.

Points to Remember

Please change the source code of each image where you have saved or copied your images. Otherwise it will show a blank page of screen.

 If you find any difficulty in creating these fancy social media icons, do let me know, I will help you out.

0 comments:

Post a Comment