Titanium Buttons

We love Bulletproof buttons at my company. Love ‘em.

However.

When a client keeps changing the CTA text, and wants the buttons to fit the text (rather than having a uniform width with the text in the middle) it can get a bit tiresome, having to go back into Photoshop, resizing the button to the new copy, re-cropping, hosting and changing the code to reflect the changes…

So. I’ve come up with a solution, that we’ve nicknamed Titanium Buttons. Basically, it’s three bulletproofs in one, working on the principle of the old magic wand trick.

The two ends are solid, sliding in and out to hide the middle background image. You just need to alter width on that middle section, to stop it from being stupid in some Outlooks. For the same reason (Outlook) the ends are background images, instead of normal images.

This only works if the image is the same on the left as it is on the right (ie, no fades / shadow from left to right). I just made the main background image 300px wide, as will never need it that wide.

Code is here: http://codepen.io/EmailChicGeek/pen/xvljB

Soundtrack is here: https://www.youtube.com/watch?v=JRfuAukYTKg

Please let me know if you find any issues!

Leave a Reply