bootstrap自訂button顏色

by cactus77kiki

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div>
  <button type="button" class="btn btn-twitch btn-xs" style="">
  click
  </button>
</div>

CSS

.btn-twitch { 
  color: #FFFFFF; 
  background-color: #AC98FE; 
  border-color: #2F1F4E; 
} 
 
.btn-twitch:hover, 
.btn-twitch:focus, 
.btn-twitch:active, 
.btn-twitch.active, 
.open .dropdown-toggle.btn-twitch { 
  color: #FFFFFF; 
  background-color: #B19EFE; 
  border-color: #a78dd6; 
} 
 
.btn-twitch:active, 
.btn-twitch.active, 
.open .dropdown-toggle.btn-twitch { 
  background-image: none; 
} 
 
.btn-twitch.disabled, 
.btn-twitch[disabled], 
fieldset[disabled] .btn-twitch, 
.btn-twitch.disabled:hover, 
.btn-twitch[disabled]:hover, 
fieldset[disabled] .btn-twitch:hover, 
.btn-twitch.disabled:focus, 
.btn-twitch[disabled]:focus, 
fieldset[disabled] .btn-twitch:focus, 
.btn-twitch.disabled:active, 
.btn-twitch[disabled]:active, 
fieldset[disabled] .btn-twitch:active, 
.btn-twitch.disabled.active, 
.btn-twitch[disabled].active, 
fieldset[disabled] .btn-twitch.active { 
  background-color: #AC98FE; 
  border-color: #2F1F4E; 
} 
 
.btn-twitch .badge { 
  color: #AC98FE; 
  background-color: #FFFFFF; 
}

JavaScript

/*
ref:
https://jsfiddle.net/Decicus/guh72hjr/
*/