Skip to content

Instantly share code, notes, and snippets.

@caycefischer
Forked from sirbrad/dabblet.css
Created June 26, 2012 16:12
Show Gist options
  • Save caycefischer/2996774 to your computer and use it in GitHub Desktop.
Save caycefischer/2996774 to your computer and use it in GitHub Desktop.
Mobile first button abstraction
/**
* Mobile first button abstraction
*/
.btn {
display: block;
text-align: center;
text-decoration: none;
padding: 1em 0;
box-sizing: border-box;
}
@media screen and (min-width: 600px) {
.btn {
display: inline-block;
padding: 1em;
}
}
/* Demonstrate btn modifiers */
.btn--twitter {
background-color: #2fa2cc;
border: 2px solid rgba(255, 255, 255, 0.8);
color: #fff;
}
.btn--github {
background-color: #ccc;
border: 2px solid rgba(255, 255, 255, 0.8);
color: #000;
}
<a href="#" class="btn btn--twitter">Twitter</a>
<a href="#" class="btn btn--github">Github</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment