The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS most efficient way to write gradient buttons with LESS?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #42096

    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) –


    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:

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.