How to remove button effect (Element color on hover)?

Sparkling
1

HI ,
How can i remove the button effect (Element color on hover)?
i want click the button after then back to normal background-color, but the (Element color on hover) change the another color,
because i use the background-color:rgba(0,0,0,0.5); on button , i can’t put this code on Input box for Element color on hover
can you tell me how do remove or code specific location?

Thanks

2

Hi @pitpot,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

.btn-default:hover,
.label-default[href]:hover,
.tagcloud a:hover, button,
.main-content [class*="navigation"] a:hover,
.label-default[href]:focus,
#infinite-handle span:hover,
.btn.btn-default.read-more:hover,
.btn-default:hover,
.scroll-to-top:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.site-main [class*="navigation"] a:hover,
.more-link:hover,
#image-navigation .nav-previous a:hover,
#image-navigation .nav-next a:hover,
.cfa-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
a:hover .flex-caption h2 {
	background-color: rgba(0,0,0,0.5) !important;
	border-color: rgba(0,0,0,0.5) !important;
}

Best Regards,
Movin

3

Thank you very much, help a lot
it is working,

4

huh,this code can active , but it will make another button no css effect…
and do you know how remove button box blue color line ?

5

Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?

6

sure, pls refer this page button.
www.acgpitpot/keytuner/
now i no add the css in site
i just want the after click button then back to narmal only.

Thanks

7

Hello there,

You can use the following CSS code to edit the hover effect by going to Appearance > Customize > Additional CSS and pasting it there.


/*Button hover effect*/
input.btn.btn-default:hover {
    background-color: rgba(0,0,0,0.5);
    border-color: rgba(0,0,0,0.5);
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;
}

Best Regards,
Support

8

this work on theme default button, but not work on create button myself,another css effect have working.
or can i add the css to my create button ?how?
<input type=“button” name="button"value="UP"button style=“width:200px;height:50px;outline:none;
}” onclick=“con()” />

9

Hello there,

I hope you are doing well today.

Could you please provide a link to a page that have the button being used so that we can inspect it?

Best Regards,
Support

10

sure , pls refer here
http://acgpitpot.com/keytuner/

11

Hello there,

Thanks for the link but these are the same buttons as before.
Please let me know if I have misunderstood something.

Best Regards,
Support

12

i want click the button after then back to normal background-color(like before click), but now is it fix (Element color on hover) select color ,
because i use the background-color:rgba(0,0,0,0.5); on button , i can’t put this code to Input box on( Element color on hover)

13

Could you please share the screenshot of how it is displaying for you and how you want it to display?