customization - Bootstrap customizing button style -

i want change style of bootstrap buttons doesn't have default look. can change color customization page want removing gradient value looks flat.

i can see there few other approaches , i've done creating own custom.css overwriting styles of bootstrap elements , have linked below default bootstrap css within html. have custom styles on .btn .btn-success customizing green button documented here doesn't anything.

i know correct steps of overwriting default styles in context of customizing buttons.

on bootstrap .css , find styles btn-primary , copy them custom .css.

now change name color want .btn-primary = .btn-blue

and then, delete or change elements.

in button use class created:

<button class="btn btn-customcollor">custom button</button> 

example gray button:

.btn.btn-gray {     border: 1px solid #626e7f;     -webkit-box-shadow: inset 0 1px 2px #9aa4b1;     -moz-box-shadow: inset 0 1px 2px #9aa4b1;     box-shadow: inset 0 1px 2px #9aa4b1;     background: #758294;     background-image: url('data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0idxrmltgipz4gphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyi+pgrlznm+pgxpbmvhckdyywrpzw50iglkpsjncmfkiibncmfkawvudfvuaxrzpsj1c2vyu3bhy2vpblvzzsigede9ijuwjsigete9ijaliib4mj0intaliib5mj0imtawjsi+phn0b3agb2zmc2v0psiwjsigc3rvcc1jb2xvcj0iizhjotdhniivpjxzdg9wig9mznnldd0imtawjsigc3rvcc1jb2xvcj0iizc1odi5ncivpjwvbgluzwfyr3jhzgllbnq+pc9kzwzzpjxyzwn0ihg9ijaiihk9ijaiihdpzhropsixmdaliibozwlnahq9ijewmcuiigzpbgw9invybcgjz3jhzckiic8+pc9zdmc+ia==');     background-size: 100%;     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c97a6), color-stop(100%, #758294));     background-image: -webkit-linear-gradient(top, #8c97a6, #758294);     background-image: -moz-linear-gradient(top, #8c97a6, #758294);     background-image: -o-linear-gradient(top, #8c97a6, #758294);     background-image: linear-gradient(top, #8c97a6, #758294);  }   .btn.btn-gray:hover {     background: #728092;     background-image: url('data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0idxrmltgipz4gphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyi+pgrlznm+pgxpbmvhckdyywrpzw50iglkpsjncmfkiibncmfkawvudfvuaxrzpsj1c2vyu3bhy2vpblvzzsigede9ijuwjsigete9ijaliib4mj0intaliib5mj0imtawjsi+phn0b3agb2zmc2v0psiwjsigc3rvcc1jb2xvcj0iizhjotdhniivpjxzdg9wig9mznnldd0imtawjsigc3rvcc1jb2xvcj0iizcyoda5miivpjwvbgluzwfyr3jhzgllbnq+pc9kzwzzpjxyzwn0ihg9ijaiihk9ijaiihdpzhropsixmdaliibozwlnahq9ijewmcuiigzpbgw9invybcgjz3jhzckiic8+pc9zdmc+ia==');     background-size: 100%;     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c97a6), color-stop(100%, #728092));     background-image: -webkit-linear-gradient(top, #8c97a6, #728092);     background-image: -moz-linear-gradient(top, #8c97a6, #728092);     background-image: -o-linear-gradient(top, #8c97a6, #728092);     background-image: linear-gradient(top, #8c97a6, #728092);     -webkit-transition: box-shadow 0.05s ease-in-out;     -moz-transition: box-shadow 0.05s ease-in-out;     -o-transition: box-shadow 0.05s ease-in-out;   transition: box-shadow 0.05s ease-in-out;  }   .btn.btn-gray:active {     background: #818d9d;     border-color: #5d6979;     -webkit-box-shadow: 0 0 5px #818d9d inset;     -moz-box-shadow: 0 0 5px #818d9d inset;     box-shadow: 0 0 5px #818d9d inset;  }  .btn-group.open .btn.btn-gray.dropdown-toggle {     background-color: #8c97a6;  }