Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinthompson/7883959 to your computer and use it in GitHub Desktop.
Save kevinthompson/7883959 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
%form.comment__form
%button Submit
%form.product__form
%button Submit
// ----
// 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
+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
form
@at-root .comment__#{&}
button, .button
@extend %btn.btn--primary
@at-root .product__#{&}
button, .button
@extend %btn.btn--warning
.comment__form button, .comment__form .button {
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;
}
.comment__form button:hover, .comment__form .button:hover {
background-color: #4d4dff;
}
.comment__form button:active, .comment__form .button:active {
background-color: #0000b3;
}
.product__form button, .product__form .button {
border: 1px solid #cc8400;
border-top-color: #e69500;
border-bottom-width: 3px;
box-shadow: inset 0 1px 0 #ffc04d;
background: orange;
border-radius: 3px;
}
.product__form button:hover, .product__form .button:hover {
background-color: #ffc04d;
}
.product__form button:active, .product__form .button:active {
background-color: #b37300;
}
<form class='comment__form'>
<button>Submit</button>
</form>
<form class='product__form'>
<button>Submit</button>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment