push like buttons using CSS sprites

Hi friends in this post I would like to share push like buttons using CSS Sprites.

ADVANTAGES OF USING CSS SPRITES Loads images fast due multiple images are used as single image thus increasing  webpage load faster. 1.USE CSS SPRITES IN BLOGGER 2.USE CSS SPRITES IN BLOGGER WITH OPACITY EFFECT 3.HOVER TABLE USING CSS SPRITES

• Upload this image to blogger and copy ”copy link address” and replace first image
”copy link address” with first background url.png.And second image ”copy link address” with second background url.png in below code.

Copy and paste the code in blogger html/javascript widget or posts,pages in HTML mode
<style>
#pushbutton{position:relative;}
#pushbutton li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#pushbutton li, #pushbutton a{height:150px;display:block;}
#hsup{left:0px;width:257px;}
#hsup{background:url('file:///C:/Users//Desktop/pushbuttons.png') 0px 0px;}
#hsup a:hover{background: url('file:///C:/Users//Desktop/pushbuttons.png')0px -151px;}
</style>
<ul id="pushbutton">
<li id="hsup"><a href="#"></a></li>
 
 
</ul>
Just design a button in photoshop using rectangle and use the same duplicate image using shadow options according to your requirements.

Now you will get the push  button like below.

SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

• 
• 
•