I style a lot of buttons, but a classic treatment I find myself needing to implement is one with a gradient background and subtle gradient stroke along the edges. Over time my solutions began with multiple elements and specific CSS for each. It got the job done but it was clearly bloated. CSS3 changes so much of our lives, and it applies here too. I’m leaving this here for a number of reasons: posterity, reference, and hopefully having it help other developers cleanly implement a streamlined button with minimal markup:
See the Pen Ebynv by Jonathan Christopher (@jchristopher) on CodePen.
I’ve used this style more times than I can count on a major recent project along with a number of satellite projects based on the same set of brand guidelines. In my projects I’ve turned this into a mixin that makes it trivial to generate buttons with a completely different base color. For instance, pop open the SCSS tab and change the $base_color to #2a92d8 and watch the background and stroke adjust automagically. Sass rocks!
I hope the implementation at least helps you out the next time you need to style a button with a gradient stroke.
Bonus hack: check out how I had to animate the gradient on hover. As of today you can’t transition gradients, but you can hack it by creating a gradient that stretches all the way from your hover state to your normal state, offset the background size, and use the button dimensions as a mask. Hack hack hackaroo!
