Change the Colour of the Hover Button on Opencart

Hovering over the search button.

For this tutorial, I will be showing you how to change the colour of a button when you hover over it on opencart. The reason I am changing the colour is because when I hover over the button the colour flickers between grey and blue. I will be using my cPanel file manager to change this.

Hovering over the add to cart button. 

To change this or fix the issue you need to access your stylesheet.css (public_html/catalog/view/theme/default/stylesheet/stylesheet.css). Once in this file you need to find .btn-primary:hover (on line 427), i changed the background-color to grey (you can change this to any colour). Then add border-color: #d9d9d9 #d9d9d9 #d9d9d9; (change this to the colour you want), add this underneath background colour. This part of your stylesheet should look like this:

}

.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {

background-color: #F2F2F2;

border-color: #d9d9d9 #d9d9d9 #d9d9d9;

background-position: 0 -15px;

Save your changes and refresh your store's website. 

Add to cart.

Search bar.

Sam. 










EDIT: When I was testing my store I noticed on the checkout page that the continue buttons flickered blue on click (these were the only ones that hadn't changed). If you come into this problem don't worry. To fix this you need to access your cPanel file manager and find buttons.tlp (public_html/catalog/view/theme/default/template/common/buttons.tlp). Once in this file find <a href="<?php echo $button['link']; ?>" class="btn btn-primary"><?php echo $button['text']; ?></a> (line 4), underneath add <a href="#" onclick="this.style.background='#f2f2f2';">Watch me change!</a>. Now the file should look like this:

<?php foreach ($buttons as $button) { ?>
      <a href="<?php echo $button['link']; ?>" class="btn btn-primary"><?php echo $button['text']; ?></a>
      <a href="#" onclick="this.style.background='#f2f2f2';">Watch me change!</a>

    <?php } ?>

Sorry for not noticing this sooner!