Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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