LESS mixins to create gradient-like button in CSS3

css3button.less

.mybutton (@bgdcolor, @fontcolor: #ffffff, @font-size: 12px, @corner: 5px, @padding: 5px 10px) {
	display: inline-block;
	*display: inline;
	color: @fontcolor;
        font-size: @font-size;
	text-decoration: none;
	cursor: pointer;
	vertical-align: middle;
        padding: @padding;
	background-color: @bgdcolor;
	background-image: url('http://d.cyhung.net/images/btn-overlay.png');
	background-image: -moz-linear-gradient(top, lighten(@bgdcolor, 10%), @bgdcolor);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(lighten(@bgdcolor, 10%)), to(@bgdcolor));
	background-image: -webkit-linear-gradient(top, lighten(@bgdcolor, 10%), @bgdcolor);
	background-image: -o-linear-gradient(top, lighten(@bgdcolor, 10%), @bgdcolor);
	background-image: linear-gradient(to bottom, lighten(@bgdcolor, 10%), @bgdcolor);
	background-repeat: repeat-x;
	border-radius: @corner;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-bottom: 1px solid rgba(0, 0, 0, 0.25); 
	-webkit-transition: background 0.1s linear;
	-moz-transition: background 0.1s linear;
	transition: background 0.1s linear;
}	
.mybuttonHover (@bgdcolor:#e6e6e6, @fontcolor:#333333) { 
	background-color: @bgdcolor; 
	color: @fontcolor;
	text-decoration:none;
        background-position: 0 -99px;
}

/images/btn-overlay.png is a fail-safe. It is a small transparent, gradient image file for browsers that do not support css3 image gradient.