Last active
October 21, 2022 22:24
-
-
Save grvhi/6167373 to your computer and use it in GitHub Desktop.
A simple CSS overwrite to add old-style gradients to Bootstrap 3 flat buttons. CSS created from http://twitterbootstrap3buttons.w3masters.nl
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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