Grow your CSS skills. Land your dream job.

most efficient way to write gradient buttons with LESS?

  • # January 18, 2013 at 9:14 pm

    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

    # January 19, 2013 at 2:01 am

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".