css Question posted in
Some basic documentation can be found here.

How to center a CTA button using HTML/CSS

I’ve taken over an ESP that was managed by a past employee. I’m having to update some email templates and I have to move the CTA around in a few cases. I’m not a coder, and every time I try to move the CTA button, I lose the centering or the tight wrap around the text (in many cases both). This is the code I have, how can I edit this to center the CTA button horizontally, vertically and have the button itself wrap tight around the text?

<div>
  <a href="https://hyperlink" style="background-color:#FA8D29;padding:12px;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;font-size:20px;line-height:0px;text-align:center;text-decoration:none;width:1000%;max-width:100% !important;-webkit-text-size-adjust:100%;line-height:22px;">
  <span style="mso-text-raise:15pt;vertical-align:middle;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;"></span>CTA Text</a>
</div>

Right now, this shows as the text centered, but the button spans the page and isn’t tight to the text. TIA!

The code above has been the closest I’ve gotten to a solution.

Tags:

2

Answers


  1. 0

    I’m a fan of grid, personally, so one approach would be to make the button’s parent a grid to control the centering. Other approaches might be preferred depending on the rest of your template’s layout or if you need to support old software that doesn’t support grids.

    As for keeping the button tight around the text, that comes down to your width: 100% on the button.

    <div style="width: 100vw;display: grid;height: 50vh;align-items: center;border:1px solid grey;">
  <a href="https://hyperlink" style="background-color:#FA8D29;padding:12px;border-radius:4px;color:#ffffff;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;font-size:20px;text-align:center;text-decoration:none;-webkit-text-size-adjust:100%;line-height:22px;margin: 0 auto;width: max-content;">
  <span style="mso-text-raise:15pt;vertical-align:middle;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;"></span>CTA Text</a>
</div>

    Or as CSS for a clearer view:

    div.parent {
    display: grid;
    width: 100vw; /* to demonstrate h-align */
    height: 50vh; /* to demonstrate v-align */
    align-items: center; /* v-centered */
    border:1px solid grey /* for demonstration */
}
a.child {
    background-color: #FA8D29;
    padding: 12px;
    border-radius: 4px;
    color: #ffffff;
    font-family: 'Lato', Tahoma, Verdana, Segoe, sans-serif;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    -webkit-text-size-adjust: 100%;
    line-height: 22px;
    margin: 0 auto; /* h-centered */
    width: max-content;
}
    <div class="parent">
  <a href="https://hyperlink" class="child">CTA Text</a>
</div>

    So the key is to set align-items: center; on the grid for vertical centering, and width: max-content; margin: 0 auto; on the button to constrain its dimensions and center it horizontally. I’ve removed other redundant properties from your existing code.

    Login or Signup to reply.
  2. 0

    This looks like it’s referenced from goodemailcode https://www.goodemailcode.com/email-code/link-button, run by Mark Robbins. Follow that guide for the full details.

    If you remove the width and max-width references, you should be fine in terms of it not then expanding out to the full width of its container.

    The standard CTA button under that method for reference is as follows:

    <a href="https://parcel.io" style="background-color:#005959; text-decoration: none; padding: .5em 2em; color: #FCFDFF; display:inline-block; border-radius:.4em; mso-padding-alt:0;text-underline-color:#005959"><!--[if mso]><i style="mso-font-width:200%;mso-text-raise:100%" hidden>&emsp;</i><span style="mso-text-raise:50%;"><![endif]-->My link text<!--[if mso]></span><i style="mso-font-width:200%;" hidden>&emsp;&#8203;</i><![endif]-->
</a>

    Just a note that divs are not supported in MS Outlook Windows, so for structure we normally use tables.

    Here is a different style button that might be easier to understand if you don’t like the above:

    <tr>
    <td style="padding:40px 15px;border-collapse:collapse;">
        <center>    
            <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;font-size:20px;line-height:20px;border-collapse:separate;" role="presentation">
                <tr>
                    <td bgcolor="#FA8D29" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: none; padding:12px; text-align: center;">
                        <a href="https://hyperlink" style="text-decoration: none;color:#ffffff;display: block;">CTA Text</a>
                    </td>
                </tr>
            </table>
        </center>
    </td>
</tr>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search