Check out a free preview of the full HTML Email Development, v2 course

The "Adding Buttons Solution" Lesson is part of the full, HTML Email Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jason demonstrates how to add accessible, and client-agnostic buttons.

Preview
Close

Transcript from the "Adding Buttons Solution" Lesson

[00:00:00]
>> Rodriguez: So let's go through and add a button to our campaign using this buttons.cm approach. So we're going to hop back over to code here. We have this link that was kind of a placeholder for our button. We want to style that and make it look like call to action.

[00:00:16]
So we're going to hop over to buttons.cm. And then we can update whatever we want in here. This is a button that's not very descriptive but we don't really have any real content in here. I'm not going to worry about a background image, I like kinda that flat style.

[00:00:31]
If I want to I can update the color on this. Hopefully ensure that it's still accessible, it has the high contrast between the background color and the color of the font. We can make this a little bit bigger like nice big buttons. That's maybe a little bit too big.

[00:00:52]
>> Rodriguez: Border radius is cool and then add our URL in here.
>> Rodriguez: So you can see that button.cm they generate all that code for you. So you can go in here and then just wholesale copy and paste it to replace whatever that URL happened to be. Usually like to kind of format this a little bit just so it's easier to read and update if needed.

[00:01:18]
But it's just using that VML that most people are not familiar with at all and it's hard to kind of come to terms with it so that's why generators like buttons.cm are so important and we save that. Pop it back, open our browser here. So you can see here after we add that in there that it's not centering this button but we might want it center looks a little bit nicer kind of balances out the center heading up there.

[00:01:45]
So on this container day of we can apply inline style and just use text align center for that. I added a center button, which is awesome. If we want to we can add some additional spacing around the button, give it a little bit of breathing room, make it easier for people to click on.

[00:02:04]
The one thing I don't particularly like about button.cm is that it tends to use smaller font sizes but that's something that's easy enough to go into the Inline CSS for that tag and update as needed to make it a little bit more readable, a little bit more usable for people that need it.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now