Skip to content

Instantly share code, notes, and snippets.

@kevinold
Forked from grvhi/twbs-btn-gradients
Created February 26, 2014 16:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinold/9233413 to your computer and use it in GitHub Desktop.
Save kevinold/9233413 to your computer and use it in GitHub Desktop.
.btn-primary {
background-color: #08c;
border-color: #08c;
color: #fff;
background-color: #007ab8;
background-image: -moz-linear-gradient(top, #08c, #006699);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#006699));
background-image: -webkit-linear-gradient(top, #08c, #006699);
background-image: -o-linear-gradient(top, #08c, #006699);
background-image: linear-gradient(to bottom, #08c, #006699);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff006599', GradientType=0);
border-color: #006699 #006699 #00334d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-primary:hover,
.btn-primary:focus {
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #006699;
}
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled.active,
.btn-primary[disabled] .btn-primary:hover,
.btn-primary[disabled] .btn-primary:focus,
.btn-primary[disabled] .btn-primary:active,
.btn-primary[disabled] .btn-primary.active {
background-color: #08c;
border-color: #08c;
}
.btn-success {
background-color: #5cb85c;
border-color: #5cb85c;
color: #fff;
background-color: #53ad53;
background-image: -moz-linear-gradient(top, #5cb85c, #449d44);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5cb85c), to(#449d44));
background-image: -webkit-linear-gradient(top, #5cb85c, #449d44);
background-image: -o-linear-gradient(top, #5cb85c, #449d44);
background-image: linear-gradient(to bottom, #5cb85c, #449d44);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449c44', GradientType=0);
border-color: #449d44 #449d44 #2d672d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-success:hover,
.btn-success:focus {
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
.btn-success:hover,
.btn-success:focus {
background-color: #449d44;
}
.btn-success.disabled:hover,
.btn-success.disabled:focus,
.btn-success.disabled:active,
.btn-success.disabled.active,
.btn-success[disabled] .btn-success:hover,
.btn-success[disabled] .btn-success:focus,
.btn-success[disabled] .btn-success:active,
.btn-success[disabled] .btn-success.active {
background-color: #5cb85c;
border-color: #5cb85c;
}
.btn-warning {
background-color: #f0ad4e;
border-color: #f0ad4e;
color: #fff;
background-color: #eea43b;
background-image: -moz-linear-gradient(top, #f0ad4e, #ec971f);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0ad4e), to(#ec971f));
background-image: -webkit-linear-gradient(top, #f0ad4e, #ec971f);
background-image: -o-linear-gradient(top, #f0ad4e, #ec971f);
background-image: linear-gradient(to bottom, #f0ad4e, #ec971f);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971e', GradientType=0);
border-color: #ec971f #ec971f #b06d0f;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-warning:hover,
.btn-warning:focus {
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
.btn-warning:hover,
.btn-warning:focus {
background-color: #ec971f;
}
.btn-warning.disabled:hover,
.btn-warning.disabled:focus,
.btn-warning.disabled:active,
.btn-warning.disabled.active,
.btn-warning[disabled] .btn-warning:hover,
.btn-warning[disabled] .btn-warning:focus,
.btn-warning[disabled] .btn-warning:active,
.btn-warning[disabled] .btn-warning.active {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.btn-danger {
background-color: #d9534f;
border-color: #d9534f;
color: #fff;
background-color: #d34541;
background-image: -moz-linear-gradient(top, #d9534f, #c9302c);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d9534f), to(#c9302c));
background-image: -webkit-linear-gradient(top, #d9534f, #c9302c);
background-image: -o-linear-gradient(top, #d9534f, #c9302c);
background-image: linear-gradient(to bottom, #d9534f, #c9302c);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302b', GradientType=0);
border-color: #c9302c #c9302c #8b211e;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-danger:hover,
.btn-danger:focus {
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
.btn-danger:hover,
.btn-danger:focus {
background-color: #c9302c;
}
.btn-danger.disabled:hover,
.btn-danger.disabled:focus,
.btn-danger.disabled:active,
.btn-danger.disabled.active,
.btn-danger[disabled] .btn-danger:hover,
.btn-danger[disabled] .btn-danger:focus,
.btn-danger[disabled] .btn-danger:active,
.btn-danger[disabled] .btn-danger.active {
background-color: #d9534f;
border-color: #d9534f;
}
.btn-info {
background-color: #5bc0de;
border-color: #5bc0de;
color: #fff;
background-color: #4ab9db;
background-image: -moz-linear-gradient(top, #5bc0de, #31b0d5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#31b0d5));
background-image: -webkit-linear-gradient(top, #5bc0de, #31b0d5);
background-image: -o-linear-gradient(top, #5bc0de, #31b0d5);
background-image: linear-gradient(to bottom, #5bc0de, #31b0d5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff30afd5', GradientType=0);
border-color: #31b0d5 #31b0d5 #1f7e9a;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-info:hover,
.btn-info:focus {
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
.btn-info:hover,
.btn-info:focus {
background-color: #31b0d5;
}
.btn-info.disabled:hover,
.btn-info.disabled:focus,
.btn-info.disabled:active,
.btn-info.disabled.active,
.btn-info[disabled] .btn-info:hover,
.btn-info[disabled] .btn-info:focus,
.btn-info[disabled] .btn-info:active,
.btn-info[disabled] .btn-info.active {
background-color: #5bc0de;
border-color: #5bc0de;
}
.btn-default {
background-color: #fff;
border-color: #fff;
color: #333;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
background-image: -o-linear-gradient(top, #fff, #e6e6e6);
background-image: linear-gradient(to bottom, #fff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-default:hover,
.btn-default:focus {
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
.btn-default:hover,
.btn-default:focus {
background-color: #e6e6e6;
}
.btn-default.disabled:hover,
.btn-default.disabled:focus,
.btn-default.disabled:active,
.btn-default.disabled.active,
.btn-default[disabled] .btn-default:hover,
.btn-default[disabled] .btn-default:focus,
.btn-default[disabled] .btn-default:active,
.btn-default[disabled] .btn-default.active {
background-color: #fff;
border-color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment