Site logo

Archived topic

Button Text Color Issue

5 replies · Started by Ravi Dixit on November 15, 2019

Viewing posts 1–6 of 6

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/

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?

Hello, Tom!

This CSS is not working.

It worked thanks

You're welcome :)

This archived topic is closed to new replies.