Text color on Buttons is unreadable on amp pages

Hi @jz9520,

Thanks for contacting us. I see the color black is not passing to the AMP version. Could you share the steps on how you included the yellow and the black colors on those buttons? If It is a plugin issue, I can suggest a fix for the next release.

And could you share your UUID so, I do a deeper analysis of your case:

Fellyph:

Thanks for so much for replying!

I use the colors in the block setting under the Color Tab for the button. The black is a default color. And for the yellow background I entered the color #.

(For whatever it’s worth, this button is a reusable button in blocks. And for some reason when I saved a few updates to blog posts in the last few days, it asked me to confirm changes to this button even though I didn’t make changes it to it. I found that odd, and then I noticed this issue. The issue may have occurred prior to WP asking me to confirm changes when I clicked update on the blog post, but I noticed it after.)

Thanks in advance!!!!!!!!!

Support UUID: ampwp-8efc4ad8-62ba-5809-8bf9-394b1752f6d5

Hi @jz9520,

Thanks for sharing more information about your issue. I have tested your content structure to reproduce the error, but I’m getting the right color on the AMP version in my tests. The only difference is that I’m not using the Genesis theme.

My block tree is: Cover Block > Columns > Column > Buttons > Button (with a link and custom colors)

Could you copy the Cover block to check if I’m missing something? On the cover block select, you can click at three dotes and copy the blocks code at the settings bar.

Remember to mark the content as code, for example:

<!-- wp:cover {"customOverlayColor":"#168eff","align":"center"} -->
<div class="wp-block-cover aligncenter"><span aria-hidden="true" class="has-background-dim-100 wp-block-cover__gradient-background has-background-dim" style="background-color:#168eff"></span><div class="wp-block-cover__inner-container"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"12%"} -->
<div class="wp-block-column" style="flex-basis:12%"></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"fontSize":"58px"},"color":{"text":"#fffffa"}}} -->
<p class="has-text-align-left has-text-color" style="color:#fffffa;font-size:58px">Let Me fight to get your a fair Settlement</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"black","style":{"color":{"background":"#ffff00"},"border":{"radius":"3px"}},"className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-black-color has-text-color has-background" href="#" style="border-radius:3px;background-color:#ffff00" target="_blank" rel="noreferrer noopener">find out for free if I can represent you </a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
</div></div>
<!-- /wp:cover -->

I’m not sure how to copy the blocks code. This is a reusable block. I hovered over the part of the block and copied the following:

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"fontSize":58,"lineHeight":"1.2"},"color":{"text":"#fffffa"}}} -->
<p class="has-text-align-left has-text-color" style="color:#fffffa;font-size:58px;line-height:1.2"><strong>Let Me Fight to Get You a Fair Settlement</strong></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left","orientation":"horizontal"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"black","style":{"color":{"background":"#ffff00"},"border":{"radius":"3px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-color has-text-color has-background" href="https://www.justinziegler.net/landing-page-free-consult/" style="border-radius:3px;background-color:#ffff00">FIND OUT FOR FREE IF I CAN REPRESENT YOU</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:image {"align":"center","id":36331,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
<div class="wp-block-image is-style-default"><figure class="aligncenter size-large"><a href="https://www.justinziegler.net/wp-content/uploads/2021/04/low-res-jz-suit-serving-florida-map-florida-1.png"><img src="https://www.justinziegler.net/wp-content/uploads/2021/04/low-res-jz-suit-serving-florida-map-florida-1-1024x576.png" alt="personal injury lawyer Justin Ziegler" class="wp-image-36331"/></a></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

Thank you very much for your time.

• This reply was modified 2 years, 9 months ago by jz9520.

Hi @jz9520,

I found an issue, especially with the black color for buttons; If you use a slightly different color, it should work:

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"fontSize":58,"lineHeight":"1.2"},"color":{"text":"#fffffa"}}} -->
<p class="has-text-align-left has-text-color" style="color:#fffffa;font-size:58px;line-height:1.2"><strong>Let Me Fight to Get You a Fair Settlement</strong></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left","orientation":"horizontal"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#ffff00","text":"#000001"},"border":{"radius":"3px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" href="https://www.justinziegler.net/landing-page-free-consult/" style="border-radius:3px;background-color:#ffff00;color:#000001">FIND OUT FOR FREE IF I CAN REPRESENT YOU</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:image {"align":"center","id":36331,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
<div class="wp-block-image is-style-default"><figure class="aligncenter size-large"><a href="https://www.justinziegler.net/wp-content/uploads/2021/04/low-res-jz-suit-serving-florida-map-florida-1.png"><img src="https://www.justinziegler.net/wp-content/uploads/2021/04/low-res-jz-suit-serving-florida-map-florida-1-1024x576.png" alt="personal injury lawyer Justin Ziegler" class="wp-image-36331"/></a></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

I will check if it affects other themes; if it is, I will open an issue on our repo. Thanks

As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Thanks for your responses. Even when I use a color other than black (like Blue), it the text still shows up as white on the button in AMP. Thanks.