i have button following styles
button { background: none; border-color: #87db41; color: #87db41; padding: 5px 5px; width: 30%; text-align: center; &: active { border-color: @aviata-color; } }<button>subscribe</button>and want remove 'press button' 3d effect. how can that? using bootstrap on site if helps
just suggestion.
when use bootstrap, can see, in bootstrap.css code, :
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn:hover, .btn:focus, .btn.focus { color: #333; text-decoration: none; } .btn:active, .btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } a.btn.disabled, fieldset[disabled] a.btn { pointer-events: none; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-default:focus, .btn-default.focus { color: #333; background-color: #e6e6e6; border-color: #8c8c8c; } .btn-default:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: #333; background-color: #e6e6e6; border-color: #adadad; } .btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus { color: #333; background-color: #d4d4d4; border-color: #8c8c8c; } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: #fff; border-color: #ccc; } .btn-default .badge { color: #fff; background-color: #333; }<button class="btn btn-default">btn default</button>first part defines display properties "btn" classes items. second part defines more specific display settings "btn-default" items (there btn-success btn-warning , on...).
if want customize this, copy code , change name "btncustom" , edit settings. or add custom specific btn-* display, btn-pink, or anything. use make several buttons color themes, in projects have things btn-black, btn-purple,...
below code example of "btncustom btncustom-default", button not move, keep static bootstrap "default" color theme :
.btncustom { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .btncustom:hover, .btncustom:focus, .btncustom.focus { text-decoration: none; } .btncustom:active, .btncustom.active { background-image: none; } .btncustom.disabled, .btncustom[disabled], fieldset[disabled] .btncustom{ cursor: not-allowed; filter: alpha(opacity=65); opacity: .65; } a.btncustom.disabled, fieldset[disabled] a.btncustom{ pointer-events: none; } .btncustom-default { color: #333; background-color: #fff; border-color: #ccc; } .btncustom-default:focus, .btncustom-default.focus { color: #333; } .btncustom-default:hover { color: #333; } .btncustom-default:active, .btncustom-default.active, .open > .dropdown-toggle.btncustom-default { color: #333; } .btncustom-default:active:hover, .btncustom-default.active:hover, .open > .dropdown-toggle.btncustom-default:hover, .btncustom-default:active:focus, .btncustom-default.active:focus, .open > .dropdown-toggle.btncustom-default:focus, .btncustom-default:active.focus, .btncustom-default.active.focus, .open > .dropdown-toggle.btncustom-default.focus { color: #333; } .btncustom-default:active, .btncustom-default.active, .open > .dropdown-toggle.btncustom-default { background-image: none; } .btncustom-default.disabled, .btncustom-default[disabled], fieldset[disabled] .btncustom-default, .btncustom-default.disabled:hover, .btncustom-default[disabled]:hover, fieldset[disabled] .btncustom-default:hover, .btncustom-default.disabled:focus, .btncustom-default[disabled]:focus, fieldset[disabled] .btncustom-default:focus, .btncustom-default.disabled.focus, .btncustom-default[disabled].focus, fieldset[disabled] .btncustom-default.focus, .btncustom-default.disabled:active, .btncustom-default[disabled]:active, fieldset[disabled] .btncustom-default:active, .btncustom-default.disabled.active, .btncustom-default[disabled].active, fieldset[disabled] .btncustom-default.active { } .btncustom-default .badge { color: #fff; background-color: #333; }<button class="btncustom btncustom-default">btncustom default</button>this looks kinda complicated, or long. allows build own css "bootstrap-like" classes style , reusable easily, save edits in "custombootstrap.css" file , add project.
hope helps ;)
Comments
Post a Comment