Skip to content

Instantly share code, notes, and snippets.

@ruedap ruedap/switch-button.png
Last active Aug 29, 2015

Embed
What would you like to do?
Switch Button CSS
.switch-button
.switch-button__button.is-active Type A
.switch-button__button Type B
.switch-button__button Type C
.switch-button {
font-size: 0;
}
.switch-button__button {
display: inline-block;
border: 1px solid rgba(0,0,0,.3);
border-right: 0;
background-color: #fff;
padding: $padding-xxxsmall $padding-large;
text-decoration: none;
color: #888;
font-size: $font-size-medium;
&:first-child {
border-top-left-radius: 999em;
border-bottom-left-radius: 999em;
padding-left: $padding-xxlarge;
}
&:last-child {
border-right: 1px solid rgba(0,0,0,.3);
border-top-right-radius: 999em;
border-bottom-right-radius: 999em;
padding-right: $padding-xxlarge;
}
&.is-active {
border: 1px solid #57ad68;
background-color: #57ad68;
color: #fff;
}
&.is-active + & {
border-left: 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.