Buttons on Website Are Blank and Only Show Text on Hover?

[Tree78]

Hey everyone,

Not sure when it happened.. a couple days ago I guess but all the sudden the buttons on a website all went blank.. no text. However, when you hover over them the text shows fine and the links are all fine. Here is the button code... as it has always been, just as a sample:

<a href="https://patentwear.com/product-category/patent-sweatshirts-unisex-men/">View All Sweatshirts</a>

If you go to the front page of the site you will see what I mean. Here is the site:

https://patentwear.com/

Just wondering what may have happened and what the fix is? Everything in the backend is updated and... there are no new plugins running that haven't always been there. Can someone let me know what the fix is? Thank you in advance.

Jeremy

https://patentwear.com/

[Victor Font]

The buttons aren't really blank. Your CSS is displaying white text on a white background. This is the CSS:

home-portfolio widget a.button, .button {
    border: 1px solid #2c2c2c !important;
    background: #fff !important;
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#fff)) !important;
    background: -webkit-linear-gradient(#fff,#fff) !important;
    background: -moz-linear-gradient(center top,#fff 0%,#fff 100%) !important;
    background: -moz-gradient(center top,#fff 0%,#fff 100%) !important;
    border-radius: 0 !important;
    box-shadow: 0 !important;
    color: #ffffff !important;
    font-family: montserratlight !important;
    font-size: 12px !important;
    font-weight: bold;
    left: auto;
    line-height: 1em;
    margin: 0;
    overflow: visible;
    text-decoration: none;
    text-shadow: 0 0px 0 rgba(255,255,255,0.0) !important;
    -moz-box-shadow: 0 !important;
    -webkit-box-shadow: 0 !important;
    -webkit-border-radius: 0 !important;
}

Your CSS classes are also wrong. You don't have a period in front of home-portfolio and widget.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Tree78]

Hi Vic,

What is the fix in the code to get them to show properly. They should be showing how they show when someone hovers across them. That dark background with the font there. They should show like that. Can you shoot me the proper code fix?

Jeremy

[Victor Font]

Get rid of all of this:

background: #fff !important;
    background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#fff)) !important;
    background: -webkit-linear-gradient(#fff,#fff) !important;
    background: -moz-linear-gradient(center top,#fff 0%,#fff 100%) !important;
    background: -moz-gradient(center top,#fff 0%,#fff 100%)

and add this: background: #000;

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Tree78]

HI Vic,

in style.css this is what I see:

I am not sure I understand the problem. Sorry, a little more help?

[Victor Font]

style.css line 1314.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Victor Font]

BTW, it would probably help if your learned how to use your browser's built-in inspection tool: https://victorfont.com/how-to-use-your-browsers-inspect-tool/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Tree78]

Hey Victor,

Yeah I know how to use it just couldn't locate the line. Okay, so this is in there now but still no change...

.home-portfolio .widget a.button,
.button 
{
border: 1px solid #2c2c2c !important;
	background: #000;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-family: montserratlight !important;
	font-size: 12px !important;
	font-weight: bold;
	left: auto;
	line-height: 1em;
	margin: 0;
	overflow: visible;
	text-decoration: none;
	text-shadow: 0 0px 0 rgba(255,255,255,0.0) !important;
	-moz-box-shadow: 0 !important;
	-webkit-box-shadow: 0 !important;
	-webkit-border-radius: 0 !important;
}

[Victor Font]

Clear your caches. The buttons look fine now. Exactly what you want.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Tree78]

Yes Victor. Thanks so much for the help. Looks good to go, had to make one more adjustment. Thank you again, very much appreciated.

[Author]

Posts