BlueOwlCreative » Topic: button hover color

button hover color

cheramycreative — Mon, 20 Feb 2017 16:54:49 +0000

Hello, I was able to change the color of the text and outline of a button to the client’s custom logo color, but I cannot seem to find how to change the hover fill in color. It is a bright orange and the composer only has choices of color names, not rgb #.

Thank you,

Reply To: button hover color

BlueOwl — Wed, 22 Feb 2017 07:11:43 +0000

Hi,

Changing the default button colors is actually pretty easy as you figured out. Override the colors in your child theme like so for example for the orange color (we will override color with red – #fe0000):

input.btn_orange, a.btn_orange, .btn_orange{
	background-color: #fe0000;
	color: #fff !important;
}
input.btn_orange.btn_outline, a.btn_orange.btn_outline, .btn_orange.btn_outline{
	color: #fe0000!important;
	border: 2px solid #fe0000;
	background: transparent;
}
input.btn_orange.btn_outline:hover, a.btn_orange.btn_outline:hover, .btn_orange.btn_outline:hover {
	background-color: #fe0000!important;
	color: #fff !important;
}

changing the default dark background on hover you can do like so:

input.btn_orange:hover, a.btn_orange:hover, .btn_orange:hover {
	background-color: #fe0000 !important;
}

Reply To: button hover color

VivianeMichelEspros — Thu, 23 Nov 2017 13:40:51 +0000

Where exactly can I add this code above to change the dark hover color of a button? Where can I find this child theme?

Thank you in advance!

Reply To: button hover color

BlueOwl — Fri, 24 Nov 2017 08:16:37 +0000

Hi there,

Child theme: http://blueowlcreative.com/docs/fortuna/#customization1
Adding the code – either in Theme Options -> Custom CSS or in the Child theme CSS file.