a:hover css doesnt work

Question

I've got a problem with some css. I have 2 buttons, one is an href and one is a form. The hover works on the form button but not on the href button.

.ims-button, .ims-button a:link, .ims-button a:visited {
    background-color: rgb(255, 204, 0);
    border: 1px solid #999;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #999999;
    font-family: Ubuntu, Arial, "Arial Unicode MS", Helvetica, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    padding: 5px;
    vertical-align: middle;
    margin-bottom: 4px;
    margin-left: 4px;
    color: #000000;
    text-decoration: none;
}
.ims-button:hover, a.ims-button:hover, .ims-button a:hover {
    background-color: rgb(255, 204, 0);
    border: 1px solid #999;
    border-radius: 5px;
    box-shadow: none;
    font-family: Ubuntu, Arial, "Arial Unicode MS", Helvetica, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    padding: 5px;
    margin: 4px 0 0 4px;
    vertical-align: middle;
}

I cannot see why the href isnt working.

The site: http://goo.gl/pl7DFR Once on the site, under the grey box with the photo in you can see the Add to cart link - click that and you'll see the 2 buttons - Checkout doesnt work, Add to Basket does...

Any ideas?

Answer 1

You're attempting to apply margin to an inline (the "a") element, which isn't possible. Change the checkout link to

display: inline-block; 

and you'll get quite a bit closer to what you're expecting.

See https://stackoverflow.com/a/5700058/2517689 for more information on inline behavior.