Join Chris Converse for an in-depth discussion in this video Creating a call-to-action button, part of Creating a Responsive HTML Email.
Now we're going to create that Call to Action button that goes…inside of the content and aligns over to the right hand side.…As we talked about before, this is going to also be set inside of a table.…And we're going to align that overall table to the right…so the content can pull around the left hand side.…So, back in our HTML file, let's scroll up to the top.…Let's find our row that holds the content. So, here's our td of the class content.…Let's come in here.…Let's add a few returns.…We're going to need to add this Call to Action button before our content here.…
Since we're going to align that to the right, we wannna have the…top of this content be as high as the top of the button.…Start with a table tag so let's come in here and add a table.…Let's set a width of 160. Align equals right.…Class is button.…What's at an inline style? Margin.…0 on the top, 0 on the right, 10 pixels on the…bottom and 30 pixels on the left. End the tag.…
Let's start a new table row, then a new td.…Inside of the td, let's add an inline style.…
This course was created and produced by Chris Converse. We are honored to host this content in our library.
- Creating the graphics
- Setting up the base layout structure
- Styling the table rows for the headline, banner, etc.
- Creating buttons
- Adding CSS media queries
- Styling the content
- Incorporating animation and web fonts
- Validating your code
- Testing in various email clients
Skill Level Beginner
Q: What are the sizes of the images used in this course?
Q: This course was updated on 11/26/2013. What changed?
A: We added two new movies to Chapter 5, "Adding HTML5 video into HTML email" and "Encoding and embedding base64 images."
Q: This course was updated on 12/03/2014. What changed?
A: We added one bonus movie, "Using high-definition graphics in your HTML email."