/* ========================================================================== Bootstrap 2 button styles, with gradients Via https://gist.github.com/Erve1879/6167373 ========================================================================== */ .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; }