Skip to content

Instantly share code, notes, and snippets.

@victorshkoda
Last active February 20, 2020 03:11
Show Gist options
  • Save victorshkoda/7be41d0f4ff432c0adf6d298535b4c71 to your computer and use it in GitHub Desktop.
Save victorshkoda/7be41d0f4ff432c0adf6d298535b4c71 to your computer and use it in GitHub Desktop.
SCSS: mixins gradient forbutton
@mixin btn_gradient($color: #9D9D9D, $width: 200px, $height: 50px){
width: $width;
height: $height;
background: $color;
background: -moz-linear-gradient(top, lighten($color, 25%) 0%, $color 50%, lighten($color, 25%) 100%);
background: -webkit-linear-gradient(top, lighten($color, 25%) 0%,$color 50%,lighten($color, 25%) 100%);
background: linear-gradient(to bottom, lighten($color, 25%) 0%,$color 50%,lighten($color, 25%) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color', endColorstr='$color',GradientType=0 );
display: inline-block;
cursor: pointer;
font-size: $height * 0.5;
line-height: $height;
text-transform: uppercase;
text-align: center;
border-radius: $height * 0.1;
box-shadow: 0px 0px $height * 0.1 darken($color, 10%);
&:hover{
background: $color;
background: -moz-linear-gradient(top, lighten($color, 10%) 0%, lighten($color, 25%) 50%, lighten($color, 10%) 100%);
background: -webkit-linear-gradient(top, lighten($color, 10%) 0%, lighten($color, 25%) 50%, lighten($color, 10%) 100%);
background: linear-gradient(to bottom, lighten($color, 10%) 0%, lighten($color, 25%) 50%, lighten($color, 10%) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color', endColorstr='$color',GradientType=0 );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment