• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Buttons on Website Are Blank and Only Show Text on Hover?

This topic is: resolved

Tagged: buttons blank, Pretty Creative theme, Pretty Darn Cute Design

  • This topic has 9 replies, 2 voices, and was last updated 6 years, 10 months ago by Tree78.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 23, 2018 at 9:14 am #222675
    Tree78
    Participant

    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/
    August 23, 2018 at 9:56 am #222677
    Victor Font
    Moderator

    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?

    August 23, 2018 at 9:59 am #222679
    Tree78
    Participant

    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

    August 23, 2018 at 10:01 am #222680
    Victor Font
    Moderator

    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?

    August 23, 2018 at 10:54 am #222681
    Tree78
    Participant

    HI 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 #222682
    Victor Font
    Moderator

    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?

    August 23, 2018 at 11:56 am #222683
    Victor Font
    Moderator

    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?

    August 23, 2018 at 12:45 pm #222686
    Tree78
    Participant

    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;
    }
    August 24, 2018 at 2:31 am #222700
    Victor Font
    Moderator

    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?

    August 24, 2018 at 7:18 am #222702
    Tree78
    Participant

    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
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Buttons on Website Are Blank and Only Show Text on Hover?’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble