SM 7 Bulletproof button – border based faux-padding, no VML, no tables Shared by Stig Morten Myre, 2016-04-05 12:16:39. Tagged: Link, All Copy to Clipboard Save to Design Library Snippet Trigger View Design Library Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your Design Library. Go to Design Library. Copied to Clipboard Your snippet is out of date. Update snippet <style type="text/css"> .btn a { background-color: #99c739; border-color: #99c739; border-style: solid; border-width: 10px 20px; border-radius: 4px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 14px; font-weight: bold; line-height: 20px; text-align: center; text-decoration: none; transition: all 0.2s ease-in; } .btn a:hover, * [lang=x-btn] a:hover { background-color: #8fba35 !important; border-color: #8fba35 !important; } </style> <div class="btn" lang="x-btn"> <a href="#"> Click here or else </a> </div>
Credits to Josh Hughes at FreeAgent who first tipped me about using borders for padding a couple years ago. And of course Justin Khoo at FreshInbox for the Gmail :hover hack. Reply to Stig Morten Myre
Just to add to this. Do you not need the full stack for border-radius? -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; Reply to Eoin Oliver
Credits to Josh Hughes at FreeAgent who first tipped me about using borders for padding a couple years ago. And of course Justin Khoo at FreshInbox for the Gmail :hover hack.
Just to add to this.
Do you not need the full stack for border-radius?
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;