Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// ----
@mixin button-base($border-color, $text-color, $bg-color: transparent)
background-color: $bg-color
border: 2px solid $border-color
color: $text-color
svg
fill: $text-color
@mixin button-hover($base-color, $text-color, $has-bg: false)
&:hover, .uploader.hover &
border-color: $base-color
color: $text-color
@if $has-bg
background-color: $base-color
svg
fill: $text-color
@mixin square($width)
&.square
padding: 0
width: $width
@mixin build-buttons($padding: 15px, $font-size: 14px, $square-size: 40px)
position: relative
vertical-align: baseline
display: inline-block
height: 40px
margin: 0 10px 0 0
padding: 0 $padding
font: bold $font-size/36px 'gotham'
cursor: pointer
text-decoration: none
white-space: nowrap
outline: none
text-align: center
+square($square-size)
+button-base(green, green)
+button-hover(darken(green, 15%), darken(green, 15%))
&:last-child
margin-right: 0
.test-button.alt
+build-buttons
button, .button, input[type="submit"], input[type="button"], input[type="reset"]
+build-buttons($padding: 40px, $font-size: 15px, $square-size: 50px)
.test-button.alt {
position: relative;
vertical-align: baseline;
display: inline-block;
height: 40px;
margin: 0 10px 0 0;
padding: 0 15px;
font: bold 0.38889 "gotham";
cursor: pointer;
text-decoration: none;
white-space: nowrap;
outline: none;
text-align: center;
background-color: transparent;
border: 2px solid green;
color: green;
}
.test-button.alt.square {
padding: 0;
width: 40px;
}
.test-button.alt svg {
fill: green;
}
.test-button.alt:hover, .uploader.hover .test-button.alt {
border-color: #003400;
color: #003400;
}
.test-button.alt:hover svg, .uploader.hover .test-button.alt svg {
fill: #003400;
}
.test-button.alt:last-child {
margin-right: 0;
}
button, .button, input[type="submit"], input[type="button"], input[type="reset"] {
position: relative;
vertical-align: baseline;
display: inline-block;
height: 40px;
margin: 0 10px 0 0;
padding: 0 40px;
font: bold 0.41667 "gotham";
cursor: pointer;
text-decoration: none;
white-space: nowrap;
outline: none;
text-align: center;
background-color: transparent;
border: 2px solid green;
color: green;
}
button.square, .button.square, input[type="submit"].square, input[type="button"].square, input[type="reset"].square {
padding: 0;
width: 50px;
}
button svg, .button svg, input[type="submit"] svg, input[type="button"] svg, input[type="reset"] svg {
fill: green;
}
button:hover, .uploader.hover button, .button:hover, .uploader.hover .button, input[type="submit"]:hover, .uploader.hover input[type="submit"], input[type="button"]:hover, .uploader.hover input[type="button"], input[type="reset"]:hover, .uploader.hover input[type="reset"] {
border-color: #003400;
color: #003400;
}
button:hover svg, .uploader.hover button svg, .button:hover svg, .uploader.hover .button svg, input[type="submit"]:hover svg, .uploader.hover input[type="submit"] svg, input[type="button"]:hover svg, .uploader.hover input[type="button"] svg, input[type="reset"]:hover svg, .uploader.hover input[type="reset"] svg {
fill: #003400;
}
button:last-child, .button:last-child, input[type="submit"]:last-child, input[type="button"]:last-child, input[type="reset"]:last-child {
margin-right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.