most efficient way to write gradient buttons with LESS?

[divinehammer]

I basically just want a chrome button style, plus a hover state. I’ve got it pared down pretty well, but wondering if there’s a way to combine the mixins so everything isn’t typed twice (-webkit-gradient, -ms-linear-gradient, etc) –

http://codepen.io/anon/pen/okvGe

[TheDoc]

I’m not sure about LESS, as I use SASS/SCSS but here’s what it’d look like (these aren’t your values, just some random ones from a pretty handy generator):

// needs latest Compass, add ‘@import “compass”‘ to your scss
background-color: #1e5799; // Old browsers
@include filter-gradient(#1e5799, #7db9e8, vertical); // IE6-8
// IE9 SVG, needs conditional override of ‘filter’ to ‘none’
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, #1e5799 0%,#7db9e8 100%));

And just in case you were interested, here’s the generator: http://www.colorzilla.com/gradient-editor/

[Author]

Posts