Skip to content

Instantly share code, notes, and snippets.

@fogrew
Created October 29, 2014 07:52
Show Gist options
  • Save fogrew/ae78a534d873c9aeb853 to your computer and use it in GitHub Desktop.
Save fogrew/ae78a534d873c9aeb853 to your computer and use it in GitHub Desktop.
Bootstrap 3.2 button outline style and outline style on inverse background
// Button outline style
.btn-outline {
background-color: transparent;
}
.btn-primary.btn-outline {
color: @btn-primary-bg;
&:hover {
background-color: @btn-primary-bg;
border-color: @btn-primary-border;
}
}
.btn-success.btn-outline {
color: @btn-success-bg;
&:hover {
background-color: @btn-success-bg;
border-color: @btn-success-border;
}
}
.btn-info.btn-outline {
color: @btn-info-bg;
&:hover {
background-color: @btn-info-bg;
border-color: @btn-info-border;
}
}
.btn-warning.btn-outline {
color: @btn-warning-bg;
&:hover {
background-color: @btn-warning-bg;
border-color: @btn-warning-border;
}
}
.btn-danger.btn-outline {
color: @btn-danger-bg;
&:hover {
background-color: @btn-danger-bg;
border-color: @btn-danger-border;
}
}
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
color: #fff;
}
// Button outline style on inverse background
.btn-outline-inverse {
background-color: transparent;
border-color: #fff;
color: #fff;
&:hover {
background-color: #fff;
}
}
.btn-primary.btn-outline-inverse:hover {
color: @brand-primary;
}
.btn-success.btn-outline-inverse:hover {
color: @brand-success;
}
.btn-info.btn-outline-inverse:hover {
color: @brand-info;
}
.btn-warning.btn-outline-inverse:hover {
color: @brand-warning;
}
.btn-danger.btn-outline-inverse:hover {
color: @brand-danger;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment