CSS 3 and the pulsating glow button

[tweetmeme source=”getintheinbox” only_single=false]Although support for CSS in email clients is patchy at best (and a nightmare at worst) we can still use some of the newest features provided by CSS3 as long as we can provide suitable alternatives for the less capable inboxes.

 

Here is an example of a special call to action that will not only animate but also display fully even when images are turned off.

How it’s done

This CSS must be placed in your html documents head as internal CSS it will not work if it is put inline. Vendor prefixes have been used for the gradient to ensure it displays in iCloud Mail no matter what web browser is used. The animation will only work in iOS devices so I have only used the -webkit prefix.

The HTML for the button <a> must sit within a table cell to fix a padding bug in Outlook. I also included much of the CSS for the button inline to ensure the colour, border and text would be formatted correctly even in less capable email clients.

A note on support

This code will not display the same in every inbox.  It will create a button of roughly the same size but the animation and other style features will change across different email clients.

iOS5, iCloud Mail
CSS3 border-radius, gradient & box-shadow. Animations work!

 

 

 

Thunderbird 9
CSS3 border-radius & gradient

 

Gmail, Hotmail
CSS3 border-radius & background colour

Outlook 2010, Yahoo! Mail
CSS3 border & background colour

 

 

The point worth mentioning is that even though Outlook and Yahoo are a bit pony it is still a good looking table button rather than an image button so it will be visible whilst images are off. Also the benefits of the curved corners and the gradient in most other inboxes + while the images are off, will help make the email look “shexzier” … Jordie 😉

Personally I think it is worth the trouble to get the buttons looking as nice as possible, but yes, the pulsing glow might be a little over kill for the effort for every button, so save it for the main call to action or something novel to attract attention in the same way as you would an animated gif.

One response to “CSS 3 and the pulsating glow button

  1. Pingback: Pulsierender Button im Newsletter per CSS | email lounge·

Comments are closed.