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

Mohammad Faizan · Accepted Answer · 2019-01-16 08:39:55Z

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.

ZealousWeb · Accepted Answer · 2021-03-23 11:29:00Z

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.

Stack Exchange Network

Change email button color not working for magento 2 email template

2 Answers 2

Hot Network Questions

Change email button color not working for magento 2 email template

2 Answers 2

Related

Hot Network Questions