Buttons

---

HTML Element	Normal	Hover	Focus	Disabled
<button class="btn btn-primary ">Btn Primary Color</button>	Btn Primary Color	Btn Primary Color	Btn Primary Color	Btn Primary Color
<button class="btn btn-primary ">Btn Primary Color<i class="mg-l-7 glyphicons-halflings-152-square-download"></i></button>	Btn Primary Color	Btn Primary Color	Btn Primary Color	Btn Primary Color
<button class="btn btn-primary btn-icon "><i class="glyphicons-halflings-185-log-in"></i></button>
<button class="btn btn-primary btn-icon-round"><i class="glyphicons-halflings-185-log-in"></i></button>
<button class="btn icons_primary2_la"><i class="glyphicons-basic-636-circle-info"></i></button>
<button class="btn icons_primary2_la"><i class="glyphicons-basic-636-circle-info"></i></button> --> in Tabellen
<button class="btn btn-light ">Btn Light</button>	Btn Light	Btn Light	Btn Light	Btn Light
<button class="btn btn-light ">Btn Light<i class="mg-l-7 glyphicons-halflings-152-square-download"></i></button>	Btn Light	Btn Light	Btn Light	Btn Light
<button class="btn btn-light btn-icon "><i class="glyphicons-basic-28-search"></i></button>
<button class="btn btn-danger ">Btn Warning</button></code>	Btn Warning	Btn Warning	Btn Warning	Btn Warning
<button class="btn btn-danger ">Btn Warning<i class="mg-l-7 glyphicons-basic-127-envelope-no"></i></button>	Btn Warning	Btn Warning	Btn Warning	Btn Warning
<button class="btn icons_warning_la"><i class="glyphicons-basic-633-circle-remove"></i></button>
<button class="btn icons_warning_la"><i class="glyphicons-basic-633-circle-remove"></i></button> --> in Tabellen
<button class="btn btn-success ">Btn Success</button></code>	Btn Success	Btn Success	Btn Success	Btn Success
<button class="btn btn-success ">Btn Success<i class="mg-l-7 glyphicons-basic-11-envelope"></i></button>	Btn Success	Btn Success	Btn Success	Btn Success
<button class="btn icons_success_la"><i class="glyphicons-basic-634-circle-check "></i></button>
<button class="btn icons_success_la"><i class="glyphicons-basic-634-circle-check "></i></button> --> in Tabellen
<div class="br-toggle br-toggle-primary on"> <div class="br-toggle-switch"></div> </div>
<div class="br-toggle br-toggle-primary off"> <div class="br-toggle-switch"></div> </div>
<div class="br-toggle br-toggle-rounded br-toggle-primary on"> <div class="br-toggle-switch"></div> </div>
<div class="br-toggle br-toggle-rounded br-toggle-primary off"> <div class="br-toggle-switch"></div> </div>

Source Code

<script>
	//toggle Switch
	$(function() {
		"use strict";
		// Toggles
		$(".br-toggle").on("click", function(e) {
			e.preventDefault();
			$(this).toggleClass("on");
		});
	});
</script>
				

Class Reference

CSS Class	Erklärung
div class="btn-grp"	als Class tag in einem Div Container um mehrere Buttons, sorgt es dafür, dass die BTN rechts zentriert angeordnet werden mit einem Margin zwischen den Elementen.
class="btn-primary"	der Button erhält die Primary Color Attribute
.btn-primary .active | .btn-primary-active	Active State des Primary Buttons
class="btn-light"	der Button erhält die Neutral Color Attribute
div class="disabled"	als Zusatz zur Visualisierung von nicht-klickbaren BTN
class="justify-content-center"	Zentrierter Button
class="glyphicons-[name]"	[name = Extension aus Library]
class="icons_primary2_la"	Interaktive Icons in Primary Color
class="icons_success_la"	Interaktive Icons in Grün
class="icons_warning_la"	Interaktive Icons in Rot
.btn-white .active | .btn-white-active	Active state der weißen Icon BTN´s im Header