treehouse : what would you like to learn today?
Web Design Web Development iOS Development

most efficient way to write gradient buttons with LESS?

  • 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

  • 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/