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.











[...] Ihr den Button per CSS animiert. Captaininbox hat sich diesem Problem angenommen und dafür ein Tutorial gepostet. Alle möglichen Email Clients werden dadurch natürlich nicht abgedeckt, aber dennoch [...]