Button disappears on hover

Developer Support CMS Development
,
1

Hi,

I’ve having to write code into boxes as the template for this website isn’t great at all.

I’ve written in code for a button but on hover it disappears. Is anyone able to help me so the button doesn’t disappear on hover? I’ll paste the code I’ve used below and a link to the page where the button is. Thanks.

<button onclick=“window.location.href=‘/contact’;”>Book a Consultation</button>

https://biild.co.uk/approach

2

Hi @HBarden,

It looks like the issue is to do with some CSS being applied to the button when a user is hovering over it. The rules can be found below. Notice the “background-color” being set to “transparent” and the “color” of the font being set to “#FFFFFF” or “white” giving the illusion the button has disappeared.

button:hover, button:focus, .button:hover, .button:focus {
 font-family: Lato, sans-serif;
 font-style: normal;
 font-weight: normal;
 text-decoration: none;
 background-color: transparent;
 border: none;
 color: #FFFFFF;
}

To fix this you could modify the rule to omit the “background-color” attribute. Are you comfortable updating/modifying CSS?

3

Hi,

I’ve looked in the button CSS, this is all I see.

/* Primary Button */

button,
.button,
.hs-button {
align-items: center;
cursor: pointer;
display: inline-flex;
letter-spacing: 0.05rem;
line-height: 1.5;
margin: 0;
text-align: center;
transition: color 0.15s linear;
white-space: normal;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
transition: background-color 0.3s;
}

/* Simple Button */

.button.button--simple {
background-color: transparent;
border: none;
padding: 0 !important;
position: relative;
}

.button.button--simple:after {
left: 0;
position: absolute;
width: 100%;
}

.button.button--simple:hover,
.button.button--simple:focus {
background-color: transparent;
border: none;
}

.button.button--simple:active {
background-color: transparent;
border: none;
}

/* Button Icons */

.button .button__icon svg {
display: block;
fill: inherit;
height: 1.25rem;
margin-right: 1rem;
}

.button.button--icon-right .button__icon {
order: 1;
}

.button.button--icon-right .button__icon svg {
margin-left: 1rem;
margin-right: 0;
}

4

Hey @HBarden,

Can you modify the rule below in the CSS file:

button:hover,
button:focus,
.button:hover,
.button:focus {
transition: background-color 0.3s;
}

to:

button:hover,
button:focus,
.button:hover,
.button:focus {
transition: background-color 0.3s;
background-color: #12a987 !important;
}
5

I’ve done that, it still seems to disappear?

6

Hey @HBarden,

It is working, it’s just that your previous CSS has been cached in your browser. You can clear the cache or just append a parameter to the URL to force the cache to clear.

7

Thank you very much for your help. Much appreciated!

8

Sorry I’ve just refreshed again and it has worked, thank you!