Skip to content

Instantly share code, notes, and snippets.

@reformatco
Last active September 11, 2022 10:18
Show Gist options
  • Save reformatco/2050588 to your computer and use it in GitHub Desktop.
Save reformatco/2050588 to your computer and use it in GitHub Desktop.
CSS3 Bevelled Button LESS Mixin
/* 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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment