css - button style

On my page the button hover & active state don't line up with the original button.
Look at the Start Shopping button on this page:
http://66.147.244.225/~minimosa/?showCart=1&sw=

What css do I need to change in the current code listed below?

 
/*link buttons*/
.shopform_btn a, .cartActionBtn {display:block;background:url(images/buy_now.png) no-repeat top left;text-indent:-9999em;}
.add_to_enquire_alt a {width:129px;background:url(images/add_inquiry_alt.png) no-repeat top left;}
.add_to_cart_alt a {width:129px;background:url(images/add_to_cart_alt.png) no-repeat top left;}
.buy_now_alt a {width:129px;background:url(images/buy_now_alt.png) no-repeat top left;}
.get_now {display:block;width:32px;height:32px;background:url(images/get_now.png) no-repeat top left;text-indent:-9999em;}
.add_to_wishlist_inactive a {background:url(images/add_to_wishlist_inactive.png) no-repeat top left;}
.start_shop {width:100px;background:url(images/start_shopping.png) no-repeat top left;}
.cont_shop {float:left;margin-right:10px;width:130px;background:url(images/continue_shopping.png) no-repeat top left;}
.cont_shop {float:left;margin-right:10px;width:130px;background:url(images/continue_shopping.png) no-repeat top left;}
.shopform_btn a:hover, .shopform_btn a:focus, .start_shop:hover, .start_shop:focus, .cont_shop:focus, .cont_shop:hover, .update_cart:focus, .update_cart:hover, .next_step:hover, .next_step:focus {background-position: 0 -20px;}
.shopform_btn a:active, .start_shop:active, .cont_shop:active, .update_cart:active, .next_step:active {background-position: 0 -60px;}

/*input buttons*/
.shopform_btn input{margin:0;padding:0;float:right;}
.shopform_btn:hover input, .shopform_btn:focus input {margin-top:0px;}
.shopform_btn:active input {margin-top:-60px;}

Open in new window

carolsanjoseAsked:
Who is Participating?
 
jonahzonaConnect With a Mentor Commented:
Right now you have

.shopform_btn a:hover, .shopform_btn a:focus, .start_shop:hover, .start_shop:focus, .cont_shop:focus, .cont_shop:hover, .update_cart:focus, .update_cart:hover, .next_step:hover, .next_step:focus {
    background-position: 0 -20px;
}

Open in new window


Make it

.shopform_btn a:hover, .shopform_btn a:focus, .start_shop:hover, .start_shop:focus, .cont_shop:focus, .cont_shop:hover, .update_cart:focus, .update_cart:hover, .next_step:hover, .next_step:focus {
    background-position: 0 -60px;
}

Open in new window


And you are good. The background position realignment was off for the hover event.
0
 
carolsanjoseAuthor Commented:
I love it when answers are quick & work right away!!!

THank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.