1

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

2 Answers 2

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.