Archived topic

Simple question on GP Generic button please!

5 replies · Started by Henry on April 11, 2019

Viewing posts 1–6 of 6

April 11, 2019 at 1:29 am #865770

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
}

April 11, 2019 at 4:37 am #865939

Hi there,

its an error in this CSS

color:#FFF;!important

the important must come before the semi colon like so:

color:#FFF !important;

April 11, 2019 at 4:45 pm #866641

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; */
}

April 12, 2019 at 2:01 am #866857

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

April 12, 2019 at 4:29 pm #867544

Thank you David - it worked.

April 13, 2019 at 3:42 am #867766

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.