Change email button color not working for magento 2 email template

Question

i tried to change the button for account confirmation email template in my custom theme like this:

app/design/frontend/Test/mine/web/css/source/_email-extend.less

.button{
    a{
        background-color: #00A73F;
        border: 1px solid #00A73F !important;
        border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        -moz-border-radius: 10px !important;
        -ms-border-radius: 10px !important;
        &:active {
            text-decoration: none;
            border: 1px solid #00A73F !important;
            border-radius: 10px !important;
            -webkit-border-radius: 10px !important;
            -moz-border-radius: 10px !important;
            -ms-border-radius: 10px !important;
        }
        &:focus {
            text-decoration: none;
            border: 1px solid #00A73F !important;
            border-radius: 10px !important;
            -webkit-border-radius: 10px !important;
            -moz-border-radius: 10px !important;
            -ms-border-radius: 10px !important;
        }
        &:visited {
            text-decoration: none;
            border: 1px solid #00A73F !important;
            border-radius: 10px !important;
            -webkit-border-radius: 10px !important;
            -moz-border-radius: 10px !important;
            -ms-border-radius: 10px !important;
        }
        &:hover {
            text-decoration: none;
            border: 1px solid #00A73F !important;
            border-radius: 10px !important;
            -webkit-border-radius: 10px !important;
            -moz-border-radius: 10px !important;
            -ms-border-radius: 10px !important;
        }
    }
}

the button background color is successfully changed, but when i hover the button, the color back to the old color

Answer 1

In Email template button hover color will not work because Pseudo CSS does not work with an email template. for example :hover, :visited, :link, :focus etc.

Answer 2

Hunter

You just add your style in the _email.less file which located below path

app/design/frontend/{{YOUR THEME NAME HERE}}/default/web/css/source/_email.less

You have add the below less

.wrapper {
    .button {
        .inner-wrapper { 
            tr {
                td {
                    background-color: #000000; 
                    a {
                        color: #ffffff; 
                        text-decoration: none;
                        border: 1px solid transparent; 
                    }
                    &:hover { 
                        background-color: #f78f1f;  
                    }
                }
            } 
        }
    }
}

After that, you have to run commands.

Note: Whenever you change anything into the _email.less file you have to run the commands.

Let me know if you still facing any issues.