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 {





margin:0px auto;



Hover Effect:

a.btnKnowMore:hover {


background-position:0px -28px;


Press effect:

a.btnKnowMore:active {


background-position:0px -56px;



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 )

Facebook photo

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

Connecting to %s

%d bloggers like this: