Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
%button.btn .btn
%button.btn.btn--primary btn.btn--secondary
%button.btn.btn--warning btn.btn--warning
%button.btn.btn--danger btn.btn--danger
%button.btn.btn--link btn.btn--link
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
// MIXINS
@mixin btn-border($color)
border: 1px solid darken($color, 10%)
border-top-color: darken($color, 5%)
border-bottom-width: 3px
box-shadow: inset 0 1px 0 lighten($color, 15%)
@mixin mouse_interactions($color)
&:hover
background-color: lighten($color, 15%)
&:active
background-color: darken($color, 15%)
@mixin default_button($color)
+btn-border($color)
+mouse_interactions($color)
background: $color
border-radius: 3px
// BTN - BASE RESET
%btn
border: none
padding: 10px 20px
// BTN
.btn
@extend %btn
+default_button(lightgray)
&.btn--primary
+default_button(blue)
color: white
&.btn--warning
+default_button(orange)
&.btn--danger
+default_button(red)
color: white
&.btn--link
+default_button(transparent)
color: blue
font-weight: bold
.btn {
border: none;
padding: 10px 20px;
}
.btn {
border: 1px solid #b9b9b9;
border-top-color: #c6c6c6;
border-bottom-width: 3px;
box-shadow: inset 0 1px 0 #f9f9f9;
background: lightgrey;
border-radius: 3px;
}
.btn:hover {
background-color: #f9f9f9;
}
.btn:active {
background-color: #adadad;
}
.btn.btn--primary {
border: 1px solid #0000cc;
border-top-color: #0000e6;
border-bottom-width: 3px;
box-shadow: inset 0 1px 0 #4d4dff;
background: blue;
border-radius: 3px;
color: white;
}
.btn.btn--primary:hover {
background-color: #4d4dff;
}
.btn.btn--primary:active {
background-color: #0000b3;
}
.btn.btn--warning {
border: 1px solid #cc8400;
border-top-color: #e69500;
border-bottom-width: 3px;
box-shadow: inset 0 1px 0 #ffc04d;
background: orange;
border-radius: 3px;
}
.btn.btn--warning:hover {
background-color: #ffc04d;
}
.btn.btn--warning:active {
background-color: #b37300;
}
.btn.btn--danger {
border: 1px solid #cc0000;
border-top-color: #e60000;
border-bottom-width: 3px;
box-shadow: inset 0 1px 0 #ff4d4d;
background: red;
border-radius: 3px;
color: white;
}
.btn.btn--danger:hover {
background-color: #ff4d4d;
}
.btn.btn--danger:active {
background-color: #b30000;
}
.btn.btn--link {
border: 1px solid transparent;
border-top-color: transparent;
border-bottom-width: 3px;
box-shadow: inset 0 1px 0 rgba(38, 38, 38, 0);
background: transparent;
border-radius: 3px;
color: blue;
font-weight: bold;
}
.btn.btn--link:hover {
background-color: rgba(38, 38, 38, 0);
}
.btn.btn--link:active {
background-color: transparent;
}
<button class='btn'>.btn</button>
<button class='btn btn--primary'>btn.btn--secondary</button>
<button class='btn btn--warning'>btn.btn--warning</button>
<button class='btn btn--danger'>btn.btn--danger</button>
<button class='btn btn--link'>btn.btn--link</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment