Social Buttons with Transition CSS Sprite

CSS Sprites is actually for making less request to server. Think your site load with 30 small images when it open in a browser. For this small 30 images (png/jpg) your hosting server will receive 30 requests. Here css sprite rocks, we will put all images in a file and just add the file url in background css with background position. The background file can be like below,

This is a example of background file, tuteplus is using this background.

I have created a background image, this below

I have create the button with CSS Sprites and transition effect.

  • Just create a navigation with basic css
  • Set the background image for each navigation item
  • Now add an extra statement for positioning background

[css]background-position: 0 37px;[/css]

  • Make hover event for the nav items and when user hover on it then the background will be changed as hover item.
  • Now we will see that the background is changing while hovering on the social nav but it is changing at once not smoth as the preview!
  • Lets apply a transition css property to make it smooth. on hover and normal event add transition delay time like below.

[css] .social:hover { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; }

.social { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; } [/css]

  • Now you are done adjust the delay time while changing background of the social nav.

My Creation is below and it’s live,

[button link=”http://asifsaho.me-content/uploads/download/social-icon/socialbtn.zip” size=”large” color=”teal”]Download Source[/button]