On Press Effect btn through css.


I want to make a btn (background image) effect in three different stage like.. normal, hover and press effect. Actually  I want to push btn inside in depth through css on mouse press. I was thinking that will happen with JavaScript and Ajax.. but when I tried with “a:active” stage.. that magic come up..

For that I cropped image as above and call them through background using “background-position” property.

So this was new learning for me in css. Here is that simple code to make such button effect:

Normal mode:

a.btnKnowMore {

background-image:url(Img/btnKnowMore.gif);

display:block;

height:28px;

width:128px;

margin:0px auto;

outline:none;

}

Hover Effect:

a.btnKnowMore:hover {

background-image:url(Img/btnKnowMore.gif);

background-position:0px -28px;

}

Press effect:

a.btnKnowMore:active {

background-image:url(Img/btnKnowMore.gif);

background-position:0px -56px;

}

Advertisements

About ashoksuthar

I am ashok suthar a web & graphic designer from Mumbai, India specializing in the user interface design. I like to build a clean, appealing and functional interfaces designs which is based on latest web standards. I love designing and it is my passion. Currently working with GMI-Idhasoft Company in Mumbai.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: