Create Animated Social Icons with CSS Image Sprites

Maangatech > Web Design > Create Animated Social Icons with CSS Image Sprites

In this tutorial, you will learn how to create animated social icons with CSS Image Sprites. Image sprites have got the major advantage of saving website bandwidth compared to using multiple images.

In this tutorial, we will create four types of animated social icons with CSS Image Sprites. Please follow the procedures below.

Requirements
– Sprite images (Download them here: Image 1 for example 1, Image 2 for example 2 and 3 and Image 4 for example 4)
– Basic understanding of HTML and CSS

  1. Download the preferred image from links provided depending on your  preference and place it in your web directory where you can link it. E.g. http://yoursite.com/images
  2. Create CSS file and name it to any name e.g image_sprites.css, paste part of preferred CSS codes from the example below; update all image links in CSS to the corresponding image location in your site. Eg. http://yoursite.com/images/example_1.png and finally save.

Example CSS

/* first example*/

.first{
    width: 440px;
    height: 100px;
}

.sprite_face_shift {
    background: url('http://yoursite.com/images/example_1.png');
    background-position:0 0;
    width: 50px;
    height: 50px;
    float:left;
    display: inline-block;
    margin-right: 10px;
    transform: perspective(1000);
    transform-style: preserve-3d;
    transition: all 400ms ease;
}
.sprite_face_shift:hover {
    background: url('http://yoursite.com/images/example_1.png');
    background-position: -1px -64px;
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}

.sprite_rss_shift {
    background: url('http://yoursite.com/images/example_1.png');
    background-position:-57px 0;
    width: 50px;
    height: 50px;
    float:left;
    display: inline-block;
    margin-right: 10px;
    transform: perspective(1000);
    transform-style: preserve-3d;
    transition: all 400ms ease;
}
.sprite_rss_shift:hover {
    background: url('http://yoursite.com/images/example_1.png');
    background-position:-57px -64px;
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}

.sprite_linked_shift {
    background: url('http://yoursite.com/images/example_1.png');
    background-position:  -114px 0;
    width: 50px;
    height: 50px;
    float:left;
    margin-right: 10px;
    display: inline-block;
    transform: perspective(1000);
    transform-style: preserve-3d;
    transition: all 400ms ease;
}
.sprite_linked_shift:hover {
    background: url('http://yoursite.com/images/example_1.png');
    background-position: -114px -64px;
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}

.sprite_pint_shift {
    background: url('http://yoursite.com/images/example_1.png') ;
    background-position: -171px 0;
    width: 50px;
    height: 50px;
    float:left;
    margin-right: 10px;
    display: inline-block;
    transform: perspective(1000);
    transform-style: preserve-3d;
    transition: all 400ms ease;
}
.sprite_pint_shift:hover {
    background: url('http://yoursite.com/images/example_1.png');
    background-position: -171px -64px;
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}

.sprite_share_shift {
    background: url('http://yoursite.com/images/example_1.png');
    background-position:-227px 0;
    width: 50px;
    height: 50px;
    float:left;
    display: inline-block;
    margin-right: 10px;
    transform: perspective(1000);
    transform-style: preserve-3d;
    transition: all 400ms ease;
}
.sprite_share_shift:hover {
    background: url('http://yoursite.com/images/example_1.png');
    background-position: -227px -64px;
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}
.sprite_youtube_shift {
    background: url('http://yoursite.com/images/example_1.png');
    background-position: -282px -1px;
    width: 50px;
    height: 50px;
    float:left;
    display: inline-block;
    margin-right: 10px;
    transform: perspective(1000);
    transform-style: preserve-3d;
    transition: all 400ms ease;
}
.sprite_youtube_shift:hover {
    background: url('http://yoursite.com/images/example_1.png');
    background-position: -282px -64px;
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}

.sprite_twitter_shift {
    background: url('http://yoursite.com/images/example_1.png');
    background-position: -337px -1px;
    width: 50px;
    height: 50px;
    float:left;
    display: inline-block;
    transform: perspective(1000);
    transform-style: preserve-3d;
    transition: all 400ms ease;
}
.sprite_twitter_shift:hover {
    background: url('http://yoursite.com/images/example_1.png');
    background-position:-337px -64px;
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}



/* second example*/

.second {
    width: 440px;
    height: 100px;
}

.sprite_face_fade {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position:-47px -96px;
    width: 55px;
    height: 54px;
    float:left;
}
.sprite_face_fade:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position: -47px -28px;
    width: 55px;
    height: 54px;
    transform: scale(1.1);
}
.sprite_rss_fade {
    background: url('http://yoursite.com/images/example_2_and_3.png') ;
    background-position:-106px -96px;
    width: 56px;
    height: 54px;
    margin-left:5px;
    float:left;
}
.sprite_rss_fade:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position: -106px -28px;
    width: 56px;
    height: 54px;
    transform: scale(1.1);
}
.sprite_linked_fade {
    background: url('http://yoursite.com/images/example_2_and_3.png') ;
    background-position: -167px -96px;
    width: 56px;
    height: 54px;
    margin-left:5px;
    float:left;
}
.sprite_linked_fade:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png') ;
    background-position: -167px -28px;
    width: 56px;
    height: 54px;
    transform: scale(1.1);
}
.sprite_pint_fade {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position:-229px -96px;
    width: 56px;
    height: 54px;
    float:left;
    margin-left:5px;
}
.sprite_pint_fade:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position: -229px -28px;
    width: 56px;
    height: 54px;
    transform: scale(1.1);
}
.sprite_share_fade {
    background: url('http://yoursite.com/images/example_2_and_3.png') ;
    background-position: -290px -96px;
    width: 56px;
    height: 54px;
    float:left;
    margin-left:5px;
}
.sprite_share_fade:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position: -291px -28px;
    width: 54px;
    height: 54px;
    transform: scale(1.1);
}
.sprite_youtube_fade {
    background: url('http://yoursite.com/images/example_2_and_3.png') ;
    background-position: -350px -96px;
    width: 56px;
    height: 54px;
    margin-left:5px;
    float:left;
}
.sprite_youtube_fade:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png') ;
    background-position: -350px -28px;
    width: 55px;
    height: 54px;
    transform: scale(1.1);
}
.sprite_twitter_fade {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position:-411px -96px;
    width: 55px;
    height: 54px;
    margin-left:5px;
    float:left;
}
.sprite_twitter_fade:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position:-411px -28px;
    width: 55px;
    height: 54px;
    transform: scale(1.1);
}

/* Third example*/

.third {
    width: 440px;
    height: 100px;
}

.sprite_face_rotate {
    background: url('http://yoursite.com/images/example_2_and_3.png') ;
    background-position: -47px -28px;
    width: 55px;
    height: 54px;
    float:left;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.sprite_face_rotate:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position:-47px -96px;
    width: 55px;
    height: 54px;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}

.sprite_rss_rotate {
    background: url('http://yoursite.com/images/example_2_and_3.png') ;
    background-position: -106px -28px;
    width: 56px;
    height: 54px;
    margin-left:5px;
    float:left;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.sprite_rss_rotate:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position: -106px -96px;
    width: 56px;
    height: 54px;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}
.sprite_linked_rotate {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position: -167px -28px;
    width: 56px;
    height: 54px;
    margin-left:5px;
    float:left;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.sprite_linked_rotate:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position: -167px -96px;
    width: 56px;
    height: 54px;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}
.sprite_pint_rotate {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position: -229px -28px;
    width: 56px;
    height: 54px;
    float:left;
    margin-left:5px;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.sprite_pint_rotate:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position:-229px -96px;
    width: 56px;
    height: 54px;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}
.sprite_share_rotate {

    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position: -291px -28px;
    width: 54px;
    height: 54px;
    float:left;
    margin-left:5px;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.sprite_share_rotate:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png') ;
    background-position: -290px -96px;
    width: 56px;
    height: 54px;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}
.sprite_youtube_rotate {
    background: url('http://yoursite.com/images/example_2_and_3.png') ;
    background-position: -350px -28px;
    width: 55px;
    height: 54px;
    margin-left:5px;
    float:left;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.sprite_youtube_rotate:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png') ;
    background-position: -350px -96px;
    width: 56px;
    height: 54px;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}
.sprite_twitter_rotate {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position: -411px -28px;
    width: 55px;
    height: 54px;
    margin-left:5px;
    float:left;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
.sprite_twitter_rotate:hover {
    background: url('http://yoursite.com/images/example_2_and_3.png');
    background-position: -411px -96px;
    width: 55px;
    height: 54px;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}

/* fourth example*/

.fourth {
    width: 410px;
    height: 100px;
}
.sprite_face {
    background: url('http://yoursite.com/images/example_4.png');
    background-position: 0 -64px;
    width: 50px;
    height: 50px;
    float:left;
    transition: all .2s ease-in-out;
}
.sprite_face:hover {
    background: url('http://yoursite.com/images/example_4.png') ;
    background-position: 0 0;
    width: 50px;
    height: 50px;
    transform: scale(1.1);
}
.sprite_rss {
    background: url('http://yoursite.com/images/example_4.png');
    background-position: -57px -64px;
    width: 50px;
    height: 50px;
    margin-left:10px;
    float:left;
    transition: all .2s ease-in-out;
}
.sprite_rss:hover {
    background: url('http://yoursite.com/images/example_4.png') ;
    background-position: -57px 0;
    width: 50px;
    height: 50px;
    transform: scale(1.1);
}
.sprite_linked {
    background: url('http://yoursite.com/images/example_4.png');
    background-position: -114px -64px;
    width: 50px;
    height: 50px;
    margin-left:10px;
    float:left;
    transition: all .2s ease-in-out;
}
.sprite_linked:hover {
    background: url('http://yoursite.com/images/example_4.png') ;
    background-position: -114px 0;
    width: 50px;
    height: 50px;
    transform: scale(1.1);
}
.sprite_pint {
    background: url('http://yoursite.com/images/example_4.png');
    background-position:-171px -64px;
    width: 50px;
    height: 50px;
    float:left;
    margin-left:10px;
    transition: all .2s ease-in-out;
}
.sprite_pint:hover {
    background: url('http://yoursite.com/images/example_4.png');
    background-position: -171px 0;
    width: 50px;
    height: 50px;
    transform: scale(1.1);
}
.sprite_share {
    background: url('http://yoursite.com/images/example_4.png') ;
    background-position: -227px -64px;
    width: 50px;
    height: 50px;
    float:left;
    margin-left:10px;
    transition: all .2s ease-in-out;
}
.sprite_share:hover {
    background: url('http://yoursite.com/images/example_4.png');
    background-position:-227px 0;
    width: 50px;
    height: 50px;
    transform: scale(1.1);
}
.sprite_youtube {
    background: url('http://yoursite.com/images/example_4.png');
    background-position: -282px -64px;
    width: 50px;
    height: 50px;
    margin-left:10px;
    float:left;
    transition: all .2s ease-in-out;
}
.sprite_youtube:hover {
    background: url('http://yoursite.com/images/example_4.png') ;
    background-position: -282px -1px;
    width: 50px;
    height: 50px;
    transform: scale(1.1);
}
.sprite_twitter {
    background: url('http://yoursite.com/images/example_4.png') ;
    background-position: -337px -64px;
    width: 50px;
    height: 50px;
    margin-left:10px;
    float:left;
    transition: all .2s ease-in-out;
}
.sprite_twitter:hover {
    background: url('http://yoursite.com/images/example_4.png');
    background-position:-337px -1px;
    width: 50px;
    height: 50px;
    transform: scale(1.1);
}
  1. Link CSS file with you page inside <head>…</head> tag E.g. this snippet
    <link rel=”stylesheet” type=”text/css” href=”image_sprites.css”>
  2. Add HTML codes corresponding to your preferred example in your site where you would like social buttons to appear; update URLs from # to your actual social pages and finally save you work.

EXAMPLE HTML

<!--First example--> 
<div class="first"> 
   <a href="#"> 
      <div class="sprite_face_shift"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_rss_shift"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_linked_shift"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_pint_shift"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_share_shift"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_youtube_shift"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_twitter_shift"> 
      </div> 
   </a> 
</div> 
<!--Second example--> 
<div class="second"> 
   <a href="#"> 
      <div class="sprite_face_fade"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_rss_fade"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_linked_fade"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_pint_fade"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_share_fade"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_youtube_fade"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_twitter_fade"> 
      </div> 
   </a> 
</div> 
<!--Third example--> 
<div class="third"> 
   <a href="#"> 
      <div class="sprite_face_rotate"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_rss_rotate"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_linked_rotate"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_pint_rotate"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_share_rotate"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_youtube_rotate"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_twitter_rotate"> 
      </div> 
   </a> 
</div> 
<!--Fourth example--> 
<div class="fourth"> 
   <a href="#"> 
      <div class="sprite_face"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_rss"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_linked"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_pint"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_share"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_youtube"> 
      </div> 
   </a> 
   <a href="#"> 
      <div class="sprite_twitter"> 
      </div> 
   </a> 
</div>

Finally, preview your work; I hope this tutorial helped you. If you have any question or feedback please post it in the comments below.

Related Post