Community Forums › Forums › Archived Forums › Design Tips and Tricks › Buttons on Website Are Blank and Only Show Text on Hover?
- This topic has 9 replies, 2 voices, and was last updated 5 years, 1 month ago by
Tree78.
-
AuthorPosts
-
August 23, 2018 at 9:14 am #222675
Tree78
ParticipantHey 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:
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/August 23, 2018 at 9:56 am #222677Victor Font
ModeratorThe 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?August 23, 2018 at 9:59 am #222679Tree78
ParticipantHi 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
August 23, 2018 at 10:01 am #222680Victor Font
ModeratorGet 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?August 23, 2018 at 10:54 am #222681Tree78
ParticipantHI Vic,
in style.css this is what I see:
I am not sure I understand the problem. Sorry, a little more help?
August 23, 2018 at 11:42 am #222682Victor Font
Moderatorstyle.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?August 23, 2018 at 11:56 am #222683Victor Font
ModeratorBTW, 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?August 23, 2018 at 12:45 pm #222686Tree78
ParticipantHey 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; }
August 24, 2018 at 2:31 am #222700Victor Font
ModeratorClear 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?August 24, 2018 at 7:18 am #222702Tree78
ParticipantYes Victor. Thanks so much for the help. Looks good to go, had to make one more adjustment. Thank you again, very much appreciated.
-
AuthorPosts
- The topic ‘Buttons on Website Are Blank and Only Show Text on Hover?’ is closed to new replies.