Skip to content

Instantly share code, notes, and snippets.

@reformatco

reformatco/less-css3-buttons

Last active September 11, 2022 10:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save reformatco/2050588 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save reformatco/2050588 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. reformatco revised this gist Sep 11, 2022. No changes.
  2. @benpalmer79 benpalmer79 created this gist Mar 16, 2012.
    42 changes: 42 additions & 0 deletions less-css3-buttons
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    /* I am using classes from http://snipplr.com/view/47181/less-classes/ for border radius */

    .css3button(
    @bg : #666,
    @border : 1px,
    @border-rad : 0.3em
    ){
    display:inline-block;
    outline:none;
    line-height:2em;
    border:@border solid desaturate(darken(@bg,10%),50%);
    background: -webkit-gradient(linear, 0 0, 0 100%,
    from(lighten(@bg,60%)),
    color-stop(3%, lighten(@bg,30%)),
    color-stop(100%, @bg),
    );
    background: -moz-linear-gradient(top,
    lighten(@bg,60%) 0%,
    lighten(@bg,30%) 3%,
    @bg 100%);
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
    .border-radius(@border-rad);
    color:desaturate(darken(@bg,20%),50%);
    font-weight:bold;
    text-decoration:none;
    padding:0 1em;

    &:active {

    background: -moz-linear-gradient(top,
    lighten(@bg,30%) 0%,
    @bg 2%,
    lighten(@bg,30%) 100%);
    background: -webkit-gradient(linear, 0 0, 0 100%,
    from(lighten(@bg,30%)),
    color-stop(2%, @bg),
    color-stop(100%, lighten(@bg,30%)),
    );
    text-shadow: 0 -1px 1px rgba(255,255,255,0.6);
    }

    }