daily pastebin goal
9%
SHARE
TWEET

LESS beautiful button

a guest Aug 10th, 2013 46 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .gradient (@from, @to) when (iscolor(@from)) and (iscolor(@to)) {
  2.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, @from), color-stop(1, @to));
  3.   background: -moz-linear-gradient(top, @from 5%, @to 100%);
  4.   background: -webkit-linear-gradient(top, @from 5%, @to 100%);
  5.   background: -o-linear-gradient(top, @from 5%, @to 100%);
  6.   background: -ms-linear-gradient(top, @from 5%, @to 100%);
  7.   background: linear-gradient(to bottom, @from 5%, @to 100%);
  8.  
  9.   background-color: @from;
  10. }
  11.  
  12. .button (@color) when (iscolor(@color)) {
  13.   @darkshade: @color - #0c0c0c;
  14.   .gradient(@color, @darkshade);
  15.   box-shadow: inset 0px 1px 0px 0px (@color + #282828);
  16.   border: 1px solid (@darkshade - #333);
  17.   border-radius: 5px;
  18.   text-decoration: none;
  19.  
  20.   &:hover {
  21.     .gradient(@darkshade, @color);
  22.   }
  23.   &:active {
  24.     position: relative;
  25.     top: 1px;
  26.   }
  27. }
RAW Paste Data
Top