CODEWITHSUNDEEP
htmlcssemailtemplatesoutlook
Riz
Riz

Reputation: 41

How to create a CSS button for Outlook 2007 Email template?

I am trying to create a blue button for an email template. The email client is Outlook 2007. I learned that it doesn't support CSS3 so I wrote this CSS for the button:

HTML:

<html>
    <a id="button" style: "text-decoration: none;" href="">
      <span style="color: white;">Button</span>
    </a>
<html>

CSS:

#button {
    background-color: #4686E8;
    border-radius: 10px;
    display: block;
    width: 142px;
    height: 36px;
    border-top: 2px #4686E8 solid;
    border-bottom: 2px #4686E8 solid;
    border-left: 2px #4686E8 solid;
    border-right: 2px #4686E8 solid;
    cursor: pointer;
    padding: 14px;
}

Some properties, for example, the border-radius and the width/height are not working in the email template. It's just showing a blue box with the text "Button" on it. How can I create a shaped button in Outlook 2007 template?

Upvotes: 0

Views: 1741

Answers (1)

Gortonington
Gortonington

Reputation: 3587

Outlook - especially the new MSWord based windows versions - tend to have terrible HTML/CSS support. This is because after Outlook 2003, Microsoft decided to stop using IE as its rendering engine for Outlook, but instead use Word HTML - which is not actual HTML.

So for Outlooks, not only are you working with the limits of HTML normally associated with email, but also the quirkiness of Word HTML and XML.

Some of your styles (e.g. border-radius) are not supported in Outlook (campaign monitor has a great 'does it work' reference for HTML email CSS).

If you desperately need to have the border radius, etc. You can use XML and supplemental MSO conditionals - but be wary, this will not only bloat code, but can cause some unusual behavior, especially in replies/forwards.

A good place to start with this code is from buttons.cm which although not perfect, can give you a great starting point.

Upvotes: 1

Related Questions