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.

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments