Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS: Linear Gradient and Text Shadow for Buttons - less mixins
.linear-gradient( @from, @to ) {
background-color: @to;
background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, @from, @to); /* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, @from, @to); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, @from, @to); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, @from, @to); /* Firefox 16+, IE10, Opera 12.50+ */
}
.linear-gradient( @from, @to: 0 ) when( @to = 0 ) {
.base-gradient( @from );
}
.base-gradient( @from, @darken: 15% ) {
@to: darken( @from, @darken );
.linear-gradient( @from, @to );
}
.text-shadow( @shadowA, @shadowB:X, ... ) {
// Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
@props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
text-shadow: @props; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
}
.button ( @from, @to, @textColor, @textShadowColor: 0 ) when (@textShadowColor = 0){
@textShadowColor: darken( @to, 70% );
.button ( @from, @to, @textColor, @textShadowColor )
}
.button ( @from, @to, @textColor, @textShadowColor ) {
@boxShadoWColor: lighten( @from, 50% );
@lightenFrom: lighten( @from, 5% );
@darkenTo: darken( @to, 5% );
.linear-gradient( @from, @to );
.box-shadow( inset 0 1px 0 0 @boxShadoWColor );
.border-radius( all, 5px );
.text-shadow( 1px 1px 0 @textShadowColor );
border: 1px solid @to;
color: @textColor;
padding: 5px 12px;
&:hover {
.linear-gradient( @lightenFrom, @darkenTo );
}
&:active {
.linear-gradient( @to, @from );
.box-shadow( none );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment