Bootstrap: Twitch button

"btn-twitch" with Twitch-like styling for a Bootstrap button

by Alex Thomassen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<button type="button" class="btn btn-twitch">
<i class="fa fa-1x fa-twitch"></i> Twitch button (w/ icon)
</button>

<br>
<br>

<button type="button" class="btn btn-twitch">
Twitch button (w/o icon)
</button>

CSS

/**
 * Special thanks to: http://blog.koalite.com/bbg/
 */
.btn-twitch { 
  color: #FFFFFF; 
  background-color: #6441A5; 
  border-color: #2F1F4E; 
} 
 
.btn-twitch:hover, 
.btn-twitch:focus, 
.btn-twitch:active, 
.btn-twitch.active, 
.open .dropdown-toggle.btn-twitch { 
  color: #FFFFFF; 
  background-color: #472e75; 
  border-color: #2F1F4E; 
} 
 
.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: #6441A5; 
  border-color: #2F1F4E; 
} 
 
.btn-twitch .badge { 
  color: #6441A5; 
  background-color: #FFFFFF; 
}

JavaScript

/*
	Bootstrap Twitch button styling.
    Bootstrap (with the base style for the "btn" class): https://getbootstrap.com/
    The icon used is included with the Font Awesome font: https://fortawesome.github.io/Font-Awesome/
*/