[Resolved] Button Text Color Issue

Home Forums Support Button Text Color Issue

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1064439
    Ravi Dixit

    I am using the following CSS for buttons on my site:

    .button {
    background-color: #2b60de;
    font-size: 20px;
    color: white;
    border-radius: 4px;
    border: none;
    }

    As you can see the font colour is White in the above CSS but it is not working at all, I have tried changing colour from the in-built option by going to Appearance>Colors>Buttons but it didn’t work also.

    Maybe, it is happening because I have set links colour using this CSS by your help.

    .single .entry-content a,
    .single .entry-content a:visited,
    .single .entry-content a:hover,
    .page .entry-content a,
    .page .entry-content a:visited,
    .page .entry-content a:hover {
    border-bottom: 0px solid #2b60de;
    color: #2b60de;
    }
    .entry-content .wp-show-posts a,
    .entry-content .wp-show-posts a:visited,
    .entry-content .wp-show-posts a:hover {
    border-bottom: 0px;
    color: black;
    }
    .abh_tab_content .abh_text a {
    border-bottom: 0 !important;
    }
    .page-numbers {
    border-bottom: 0 !important;
    color: black;
    }

    So, I am changing the colour of buttons’s text manually by the help of editor option, It is working good but not with the AMP Version.

    As I have sent button’s text colour white, It is not showing in AMP version( see here https://prnt.sc/pxlqoj). I don’t know what to do know, please help me with this.

    How can I set the colour on .button class and show buttons on AMP version too?

    And another question, why list text’s font is different that body font in AMP version? Just because I am using custom CSS in it? See the above screenshot.

    Note: I have changed the button text colour to black just because it should be shown in AMP. I don’t want my readers to confused.

    Here is the link of the page: https://www.staymeonline.com/best-black-friday-web-hosting-deals/

    #1064588
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Yea, I think it’s because of that CSS.

    Try this instead:

    .button,
    .single .entry-content a.button,
    .page .entry-content a.button {
        background-color: #2b60de;
        font-size: 20px;
        color: white;
        border-radius: 4px;
        border: none;
    }
    
    .single .entry-content a.button:visited,
    .single .entry-content a.button:hover,
    .page .entry-content a.button:visited,
    .page .entry-content a.button:hover {
        /* hover styles */
    }

    How can I view the AMP version of the site?

    #1064892
    Ravi Dixit

    Hello, Tom!

    This CSS is not working.

    #1064982
    Tom
    Lead Developer
    Lead Developer
    #1065285
    Ravi Dixit

    It worked thanks

    #1065626
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.