Archived topic
Button Text Color Issue
5 replies · Started by Ravi Dixit on November 15, 2019
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 :)