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;
}
ashok suthar 