[Resolved] Simple question on GP Generic button please!

[Henry]

Sorry guys, I know that this is a simple question but here goes: does anyone know why the font color for this link in my button is blue? It should be WHITE on active, hover and visited.

However the weird thing is that it remains ‘blue’ – so clearly the global setting is making it blue. I even added the !important tag and no joy….

Any idea why it remains blue? Thanks!

<a class="button sun-flower" href="#">Your button text</a>

.button.sun-flower,
.button.sun-flower:visited {
	background: #74b9ff;
	color:#FFF;!important
}

.button.sun-flower:hover,
.button.sun-flower:active {
	background: #0984e3;
	color:#FFF;!important
}

[David]

Hi there,

its an error in this CSS

color:#FFF;!important

the important must come before the semi colon like so:

color:#FFF !important;

[Henry]

Thank you David – that solved that issue but now this has happened: https://prnt.sc/nast2j

Looks like a padding issue to me…

Here’s the CSS that is being used:

Thanks for your help..

.button.sun-flower,
.button.sun-flower:visited {
	background: #74b9ff;
  color:#FFF !important;
  /* width: 100%; */
  /* cursor: pointer;
  text-align: center; */
}

.button.sun-flower:hover,
.button.sun-flower:active {
	background: #0984e3;
	color:#FFF !important;
  /* width: 100%; */
  /* cursor: pointer;
  text-align: center; */
}

[David]

Remove the width: 100%; property entirely. That should stop it from extending outside the container.

[Henry]

Thank you David – it worked.

[David]

Glad to be of help

[Author]

Posts