Submit buttons on Collect Details have no mouseover highlight

[rldev]

Not sure if this is by design or a css isuue, but I have a hover over effect for all buttons on my site with the exception of the submit buttons on the collect details page. How can I add the same hover over effect for the two submit buttons(one for subscription and the other for one-time purchases)?

[https://aliveandhealthy.com/new-website/donations/]

Just enter a value for monthly donation and submit.

[wzp]

I have a hover over effect for all buttons on my site…

Please point us to a specific example of a button that already does what you want.

Also the page you shared gives a 404 error.

[rldev]

Sorry I changed the page name since this post:

[https://aliveandhealthy.com/new-website/donate/]

[wpCommerce]

@rldev, What sort of hover effect do you want to apply? It’s just an image. So if you want to customize it, you can replace the existing submit button with your own image. (wp-content/plugins/wp-payment-gateway/images/btn_submit.jpg).

The button image is wrapped in a div (div class="submit-btn"). You can apply CSS to it using our Custom CSS plugin: https://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

[rldev]

Yes I understand. I have the great css plugin. All of the buttons used in eStore have the same hover effect with the exception of this one.

[wzp]

It would really be helpful, if you can provide a link to a test page on your site with 2 buttons on it; the one that works the way you want, and the one that does not. And instructions with a narrative on what we are supposed to notice.

[rldev]

I did

[http://aliveandhealthy.com/new-website/donate/]

Enter an amount into Monthly Donation and click the button. Then on order form hover over the pay button.

[wzp]

…I have a hover over effect for all buttons on my site with the exception of the submit buttons on the collect details page.

So, are the 2 Donate buttons at the bottom of the page supposed to do anything if I mouse-over them? Because they don’t.

[rldev]

Yes they do. I have tested this on all major browsers.They get a little white highlight when you mouse over them. It’s subtle but certainly noticeable.

[admin]

The add to cart, buy now and subscription buttons have a “opacity” style applied to them. You can apply the same opacity for the mouseover on your credit card checkout submit button also.

[rldev]

Thanks how can I do this. I can’t seem to find what I’m looking for in the css.

[admin]

Grab the CSS plugin that wpEcommerce suggested in an earlier post.

Then add the following custom CSS in there:

.submit-btn:hover{

opacity: 0.7;

}

[rldev]

Thanks. That is perfect.

[Author]

Posts