Skip to content

Instantly share code, notes, and snippets.

@jdlehman
Created September 17, 2014 23:55
Show Gist options
  • Select an option

  • Save jdlehman/ad10c8d57ac2807bcfc8 to your computer and use it in GitHub Desktop.

Select an option

Save jdlehman/ad10c8d57ac2807bcfc8 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<button class="Btn">Just a Button</button>
<button class="Btn--disabled">Disabled Button</button>
<button class="Btn-secondary">Secondary Button</button>
<button class="Btn-secondary--disabled">Secondary Disabled Button</button>
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
.Btn {
background-color: blue;
border-radius: 5px;
color: white;
padding: 0.5rem;
}
.Btn--disabled {
background-color: grey;
border-radius: 5px;
color: white;
padding: 0.5rem;
}
.Btn-secondary {
background-color: white;
border-radius: 5px;
color: blue;
padding: 0.5rem;
}
.Btn-secondary--disabled {
background-color: light-grey;
border-radius: 5px;
color: blue;
padding: 0.5rem;
}
.Btn {
background-color: blue;
border-radius: 5px;
color: white;
padding: 0.5rem;
}
.Btn--disabled {
background-color: grey;
border-radius: 5px;
color: white;
padding: 0.5rem;
}
.Btn-secondary {
background-color: white;
border-radius: 5px;
color: blue;
padding: 0.5rem;
}
.Btn-secondary--disabled {
background-color: light-grey;
border-radius: 5px;
color: blue;
padding: 0.5rem;
}
<button class="Btn">Just a Button</button>
<button class="Btn--disabled">Disabled Button</button>
<button class="Btn-secondary">Secondary Button</button>
<button class="Btn-secondary--disabled">Secondary Disabled Button</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment