Skip to content

Instantly share code, notes, and snippets.

@rgsoto
Created August 18, 2014 14:03
Show Gist options
  • Save rgsoto/a311d6ffab92b63f1781 to your computer and use it in GitHub Desktop.
Save rgsoto/a311d6ffab92b63f1781 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="buttons">
<a class="gray" href="#">
Default
<strong>
</a>
<a class="blue" href="#">
Primary
</a>
<a class="green"href="#">
Success
</a>
<a class="light-blue"href="#">
Info
</a>
<a class="orange"href="#">
Warning
</a>
<a class="red"href="#">
Danger
</a>
</div>
// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----
a {
padding: 5px 10px;
border: solid 1px black ;
border-top: 1px solid;
display: inline-block;
vertical-align: middle;
text-decoration: none;
border-radius: 25px;
display: inline-block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
}
.gray {
border-color: #CCCCCC;
color: black;
background-color: white;
}
.blue {
background-color: #368EC6;
color: white;
border: none;
}
.green {
background-color: #50B667;
color: white;
border: none;
}
.light-blue {
background-color:#4BC0DF;
color: white;
border: none;
}
.orange {
background-color:#F5AC47;
color: white;
border: none;
}
.red {
background-color:#DF544A;
color: white;
border: none;
}
a {
padding: 5px 10px;
border: solid 1px black;
border-top: 1px solid;
display: inline-block;
vertical-align: middle;
text-decoration: none;
border-radius: 25px;
display: inline-block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: black 0 1px 0;
-moz-box-shadow: black 0 1px 0;
}
.gray {
border-color: #CCCCCC;
color: black;
background-color: white;
}
.blue {
background-color: #368EC6;
color: white;
border: none;
}
.green {
background-color: #50B667;
color: white;
border: none;
}
.light-blue {
background-color: #4BC0DF;
color: white;
border: none;
}
.orange {
background-color: #F5AC47;
color: white;
border: none;
}
.red {
background-color: #DF544A;
color: white;
border: none;
}
<div class="buttons">
<a class="gray" href="#">
Default
<strong>
</a>
<a class="blue" href="#">
Primary
</a>
<a class="green"href="#">
Success
</a>
<a class="light-blue"href="#">
Info
</a>
<a class="orange"href="#">
Warning
</a>
<a class="red"href="#">
Danger
</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment