Skip to content

Instantly share code, notes, and snippets.

@adamjohnson
Created January 30, 2015 16:19
Show Gist options
  • Select an option

  • Save adamjohnson/d79d6bd7f780a5d39705 to your computer and use it in GitHub Desktop.

Select an option

Save adamjohnson/d79d6bd7f780a5d39705 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
// Primary
$dark-orange: #d9531e;
$orange: #f47b20;
$orange-med: #d9531e;
// Tertiary
$orange-dark: #bb471a;
// Original:
a {
&.btn {
&:active, &:link, &:visited {
display:block;
text-align:center;
background-color:$orange;
padding:0.5em;
margin:1em auto;
width:40%;
color:#fff;
font-weight:400;
text-transform:uppercase;
text-decoration:none;
&:hover, &:focus {background-color:$orange-dark;}
}
}
}
// Improved Specificity:
.btn {
display:block;
text-align:center;
background-color:$orange;
padding:0.5em;
margin:1em auto;
width:40%;
font-weight:400;
text-transform:uppercase;
text-decoration:none;
color:#fff;
&:visited, &:link { color:#fff; }
&:hover, &:focus {background-color:$orange-dark;}
}
a.btn:active, a.btn:link, a.btn:visited {
display: block;
text-align: center;
background-color: #f47b20;
padding: 0.5em;
margin: 1em auto;
width: 40%;
color: #fff;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
}
a.btn:active:hover, a.btn:active:focus, a.btn:link:hover, a.btn:link:focus, a.btn:visited:hover, a.btn:visited:focus {
background-color: #bb471a;
}
.btn {
display: block;
text-align: center;
background-color: #f47b20;
padding: 0.5em;
margin: 1em auto;
width: 40%;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
color: #fff;
}
.btn:visited, .btn:link {
color: #fff;
}
.btn:hover, .btn:focus {
background-color: #bb471a;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment