Posted By

roflman79 on 03/02/11

Tagged

css
CSS3

Versions (?)

Last Edited at 03/02/11 11:56pm

Statistics

Viewed 757 times

Favorited by 1 user(s)

Related snippets

CSS3 Bevelled Button LESS Mixin

/ Published in: CSS

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/* 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);
	}
 
}