Docs

[mattbeeps]

Hello I’m trying to change the button color and hover color of your button shortcode button I’m having a problem. I’m trying to make the button border white, button background blue and button text white and then the opposite of all three on hover. While the text color is changing the button background and button border colors are defaulting to the theme link colors which are red.

My html code is:

[button class=”my-slider-btn” type=”transparent” shape=”pill” size=”large” href=”http://” title=”Button” class=”front-page-white”] TAKE THE FREEDOM QUIZ [icon type=”angle-right”][/button]

My css code is:

front-page-white {color:#fff; font-size: 25px;
}
A.front-page-white:link {color: #fff;}
A.front-page-white:visited {color: #fff;}
A.front-page-white:hover {color: #0096FF;}
A.front-page-white:active {color: #fff;}

.x-btn.my-slider-btn {
color: #ffffff !important;
border-color: #ffffff !important;
background-color: #0096ff !important;
}

.x-btn.my-slider-btn:hover {
color: #ffffff !important;
border-color: #0096ff !important;
background-color: #ffffff !important;
}

[mattbeeps]

This reply has been marked as private.

[Rupok]

Hi there,

Please remove all of your code regarding this and use this :

.x-btn.front-page-white {
  background-color: #0096ff;
  border-color: #fff;
  color: #fff;
}
.x-btn.front-page-white:hover {
  background-color: transparent;
  border-color: rgb(196, 0, 0);
  color: #0096ff;
}

Use the same syntax for other buttons if you have.

Cheers!

[Friech]

Hi There,

Please replace your custom CSS with this:

.front-page-white {
	color: white;
	border-color: white;
	background-color: blue !important;
}
.front-page-white:hover {
	color: blue;
	background-color: white !important;
}

Hope it helps, Cheers!

[Author]

Posts