Button changes color in AMP version

Hi @theevoq,

Thanks for contacting us again. That is a common question. Your website uses reader mode Legacy; in this case, AMP and non-AMP versions share a different theme.

I have tested the default gradient colors from Gutenberg, and I couldn’t reproduce your issue:

Editor

AMP Legacy Reader mode

I saw your buttons have a class “has-vivid-cyan-blue-to-vivid-purple-gradient-background.” How do you include this glowing button? Could you share a screenshot?

AMP is compatible with Gutenberg blocks, but themes or plugins could add incompatible features; if a plugin or theme adds the feature that is causing the problem, you should contact the plugin or theme developer to notify them about this issue.

But in the meantime, you can add custom CSS for legacy themes. To CSS to a legacy reader mode, you can add this code to your function.php or add as a mini plugin:

add_action( 'amp_post_template_css', function() {
      ?>
      /* Put Custom CSS below */
.wp-block-buttons .wp-block-button .has-vivid-cyan-blue-to-vivid-purple-gradient-background {
    background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple);
} 
.wp-block-buttons .wp-block-button .has-light-green-cyan-to-vivid-green-cyan-gradient-background {
background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan);
}
      <?php
 } );

Hi @theevoq,

Thanks for getting back, the code that I shared previously, is to be used at the functions.php or as a plugin. Make sure to test the code in a test environment to see if the solution fits to you. But as mentioned before this solution should be part of the theme or plugins that includes these glowing buttons.

I have updated the code because I have used the same code as the non-AMP version that is using CSS variables that are not present on your AMP version. And add your code for the hover state:

add_action( 'amp_post_template_css', function() {
      ?>
        /* Put Custom CSS below */
        a.wp-block-button__link.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
            background: linear-gradient( 135deg ,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
            background-color: transparent;
        }

        a.wp-block-button__link.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
            background: linear-gradient( 135deg ,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
            background-color: transparent;
        }

        a.wp-block-button__link.has-vivid-cyan-blue-to-vivid-purple-gradient-background:hover {
            box-shadow: 0px 0px 7px 2px #9b51e0;
        }

        a.wp-block-button__link.has-light-green-cyan-to-vivid-green-cyan-gradient-background:hover {
            box-shadow: 0px 0px 7px 2px #00d082;
        }
      <?php
 } );

Here are the results of my tests:

• This reply was modified 4 years, 4 months ago by Fellyph Cintra.

Great news, @theevoq; if there are any questions that we could help with, feel free to contact us.

Hi @theevoq,

Where did you find the color codes for the buttons?

There are using CSS variables, if you are using chrome:
1. you can open the devtools
2. inspect the element
3. check the property that is calling the colors

4. double click over the property and chrome will show the values

I now want to do this for the orange button at the end of this page.

Those colors should be passing by the theme/plugin that I have mention previously, if not every color variation should be included via functions. But I have added the two items that you asked, any custom CSS that you need you can include between the comments on this example.

add_action( 'amp_post_template_css', function() {
      ?>
        /* Put Custom CSS below */
        a.wp-block-button__link.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
            background: linear-gradient( 135deg, rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
            background-color: transparent;
        }

        a.wp-block-button__link.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
            background: linear-gradient( 135deg, rgb(122,220,180) 0%,rgb(0,208,130) 100%);
            background-color: transparent;
        }

        a.wp-block-button__link.has-white-color.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background.has-text-color {
            background: linear-gradient( 135deg, rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
        }

        a.wp-block-button__link.has-vivid-cyan-blue-to-vivid-purple-gradient-background:hover {
            box-shadow: 0px 0px 7px 2px #9b51e0;
        }

        a.wp-block-button__link.has-light-green-cyan-to-vivid-green-cyan-gradient-background:hover {
            box-shadow: 0px 0px 7px 2px #00d082;
        }

        .wp-block-buttons {
            display: flex;
            gap: 0.5em;
            flex-wrap: wrap;
            align-items: center;
        }

        /* End Custom CSS */
      <?php
 } );

Hi @theevoq,

Great news! I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.