'Add to cart' button CSS issues – Storefront theme

Hi there,

I’m working on a site and I have an issue that’s causing me to tear my hair out!

I’m in the process changing the shop ‘add to cart’ (AJAX) buttons (not the product page buttons).

I am having trouble with the styles and am unsure if i’m going about this the right way.

1. I have set the button to black
2. I want the button to turn blue on hover/click

However, this is what is happening currently

1. The button is black
2. It turns blue on hover
3. When I click it (to add to basket) I get a weird light grey highlight https://s4.postimg.org/rhvtnis8t/State_2.jpg – I don’t want this to happen
4. I sometimes get flashes of a grey background if I click rapidly https://s3.postimg.org/xltj6qh2r/State_3.jpg – I don’t want this to happen

I’ve tried removing default WooCommerce button colours, used the inspector to see if there’s any classes i’m missing – I am completely stumped!

Here’s the code I am using

.add_to_cart_button, .ajax_add_to_cart {
  width: 100%;
  position: relative;
  line-height: 50px;
  background-color: #000 !important;
  color: #fff !important;
  overflow: hidden;
  padding: 0px;
  box-shadow: none;

}

.add_to_cart_button:hover, .ajax_add_to_cart:hover {
  background-color: #015EA1 !important;
  color: #fff !important;
  overflow: hidden;
  box-shadow: none;
}

.add_to_cart_button:active, .ajax_add_to_cart:active {
  width: 100%;
  position: relative;
  line-height: 50px;
  background-color: #000 !important;
  color: #fff !important;
  overflow: hidden;
  box-shadow: none;
}

I am developing this on localhost. Any help would be greatly appreciated!

Thanks