What CSS code can I use to fix my checkout buttons?

Question

I need CSS that I can place in my custom CSS file that will fix the "Discount Codes" and "Place Order" buttons on my checkout page.

I need to manipulate each button color separately (if possible) and change both button background color and background hover color.

At the moment the green standard color will not disappear. It should be all red with a white text and pink hover. No green background in the middle of the button.

Checkout page is using the Magento extension IWD One Page Checkout.

Go here, add product to page, and then checkout to see problem: http://www.petpresto.com.au/large-chicken-coop-with-run-metal-pull-out-tray-and-vermin-proof-wire.html

Answer 1

So you have two buttons.

First one is for Discount Coupons:

<button type="button" title="Apply" class="button apply-coupon" value="Apply"><span><span>Apply</span></span></button>

It has class .apply-coupon and .button so you can style it however you want in your CSS files by making:

.button.apply-coupon {
/*Your styles go here*/
    }

The background that you see under the text is caused by line 167 in opc.css

.opc-wrapper-opc .discount-block .button span span {
background: #00909E;
color: #FFF;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 1px #02484F;
padding: 0 20px;
}

The span that's inside the button is styling text wrapped in the button with green background. Delete the span inside the button or add additional css like:

 .opc-wrapper-opc .discount-block .button.apply-coupon span span{
background:none !important;
}

The green background on:

<button type="button" title="Place Order" class="button btn-checkout opc-btn-checkout"><span><span>Place Order</span></span></button>

Is caused by the same style in opc.css but on line 216.

.opc-wrapper-opc .btn-checkout span span {
background: #00909E;
color: #FFF;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 1px #02484F;

You can change it by deleting that background-color for button or adding css:

.opc-wrapper-opc .btn-checkout span span {
background: none !important; 
}

P.S. Check your whole OPC.css file as I see more duplicated styles for that span wrapper in buttons (i.e. search your file for: background: #00909E;)

Edit:

Now on SPAN element:hover you're changing your background color to #f55 just like on button. But on button you added

transition { 
 color 300ms ease-in-out, background-color 300ms ease-in-out;
-moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; 
-webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out;
-o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out;

}

So you have to add same transitoin on span hovering as span is immediately changing color to #F55, while button is animating transition effect which occurs with 300ms later color change.

Answer 2

Use this css for Change Button color

 #opc-discount-coupon-form .button.apply-coupon {
    background: none repeat scroll 0 0 grey ;
 }

 #review-buttons-container .button.btn-checkout.opc-btn-checkout {
     background: none repeat scroll 0 0 yellow;
 }

#opc-discount-coupon-form .button.apply-coupon span {
    background: none repeat scroll 0 0 grey !important;
 }

#checkout-review-submit .button.btn-checkout.opc-btn-checkout > span span {
    background: none repeat scroll 0 0 yellow !important;
 }

Answer 3

Use FireFox and install the FireBug Ap. Start playing around with it. Watch a video or two and you will start to make sense of it. Also love chicken coops. Seems pretty great. Good Luck