<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="title">
<h3>Checkboxes</h3>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Unchecked
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked="">
Checked
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" disabled="">
Disabled unchecked
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" disabled="" checked="">
Disabled checked
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="title">
<h3>Radio Buttons</h3>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
Radio is off
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked="">
Radio is on
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios11" value="option1" disabled="">
Disabled radio is off
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadio1" id="exampleRadios21" value="option2" checked="" disabled="">
Disabled radio is on
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="title">
<h3>Toggle Buttons</h3>
</div>
<div class="togglebutton">
<label>
<input type="checkbox" checked="">
<span class="toggle"></span>
Toggle is on
</label>
</div>
<div class="togglebutton">
<label>
<input type="checkbox">
<span class="toggle"></span>
Toggle is off
</label>
</div>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p>
</footer>
</body>
html *{
-webkit-font-smoothing: antialiased;
}
.container h3 {
font-size: 1.5625rem;
line-height: 1.4em;
font-weight: 300;
font-family: 'Roboto';
}
.title {
margin-top: 30px;
margin-bottom: 25px;
min-height: 32px;
}
.form-check {
font-size: 14px;
line-height: 1.42857;
color: #AAA;
font-weight: 400;
margin-bottom: .5rem;
padding-left: 0 !important;
}
.form-check .form-check-label {
padding-left: 25px;
position: relative;
cursor: pointer;
}
.form-check .form-check-input {
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
}
.form-check .form-check-input {
position: absolute;
margin: 0;
z-index: -1;
left: 0;
pointer-events: none;
}
.form-check .form-check-sign {
vertical-align: middle;
position: relative;
top: -2px;
float: left;
padding-right: 10px;
display: inline-block;
}
.form-check .form-check-sign:before {
display: block;
position: absolute;
left: 0;
content: "";
background-color: rgba(0,0,0,.84);
height: 20px;
width: 20px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
top: 0;
-webkit-transform: scale3d(2.3,2.3,1);
-moz-transform: scale3d(2.3,2.3,1);
-o-transform: scale3d(2.3,2.3,1);
-ms-transform: scale3d(2.3,2.3,1);
transform: scale3d(2.3,2.3,1);
}
.form-check .form-check-sign .check {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid rgba(0,0,0,.54);
overflow: hidden;
z-index: 1;
border-radius: 3px;
}
.form-check .form-check-sign .check:before {
position: absolute;
content: "";
transform: rotate(45deg);
display: block;
margin-top: -3px;
margin-left: 7px;
width: 0;
color: #fff;
height: 0;
box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
-webkit-animation: checkbox-off .3s forwards;
-moz-animation: checkbox-off .3s forwards;
-o-animation: checkbox-off .3s forwards;
-ms-animation: checkbox-off .3s forwards;
animation: checkbox-off .3s forwards;
}
.form-check .form-check-input:checked+.form-check-sign .check:before {
color: #FFF;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-webkit-animation: checkbox-on .3s forwards;
-moz-animation: checkbox-on .3s forwards;
-o-animation: checkbox-on .3s forwards;
-ms-animation: checkbox-on .3s forwards;
animation: checkbox-on .3s forwards;
}
.form-check .form-check-input:checked+.form-check-sign .check {
background: #9c27b0;
}
.form-check .form-check-label span {
display: block;
position: absolute;
left: -1px;
top: -1px;
transition-duration: .2s;
}
label {
font-size: 0.875rem !important;
}
.form-check .form-check-label .circle {
border: 1px solid rgba(0,0,0,.54);
height: 15px;
width: 15px;
border-radius: 100%;
top: 1px;
}
.form-check .form-check-label .circle:before {
display: block;
position: absolute;
left: -1px;
content: "";
background-color: rgba(0,0,0,.84);
height: 15px;
width: 15px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
top: -1px;
-webkit-transform: scale3d(2.3,2.3,1);
-moz-transform: scale3d(2.3,2.3,1);
-o-transform: scale3d(2.3,2.3,1);
-ms-transform: scale3d(2.3,2.3,1);
transform: scale3d(2.3,2.3,1);
}
.form-check .form-check-input:checked~.circle {
border-color: #9c27b0;
}
.form-check .form-check-label .circle .check {
height: 15px;
width: 15px;
border-radius: 100%;
background-color: #9c27b0;
-webkit-transform: scale3d(0,0,0);
-moz-transform: scale3d(0,0,0);
-o-transform: scale3d(0,0,0);
-ms-transform: scale3d(0,0,0);
transform: scale3d(0,0,0);
}
.form-check .form-check-input:checked~.circle .check {
-webkit-transform: scale3d(.65,.65,1);
-moz-transform: scale3d(.65,.65,1);
-o-transform: scale3d(.65,.65,1);
-ms-transform: scale3d(.65,.65,1);
transform: scale3d(.65,.65,1);
}
.form-check .form-check-input:checked~.check, .form-check .form-check-input:checked~.circle {
opacity: 1;
}
.togglebutton {
vertical-align: middle;
}
.togglebutton,
.togglebutton label,
.togglebutton input,
.togglebutton .toggle {
user-select: none;
}
.togglebutton label {
cursor: pointer;
color: rgba(0, 0, 0, 0.26);
}
.form-group.is-focused .togglebutton label {
color: rgba(0, 0, 0, 0.26);
}
.form-group.is-focused .togglebutton label:hover,
.form-group.is-focused .togglebutton label:focus {
color: rgba(0, 0, 0, .54);
}
fieldset[disabled] .form-group.is-focused .togglebutton label {
color: rgba(0, 0, 0, 0.26);
}
.togglebutton label input[type=checkbox] {
opacity: 0;
width: 0;
height: 0;
}
.togglebutton label .toggle {
text-align: left;
margin-left: 5px;
}
.togglebutton label .toggle,
.togglebutton label input[type=checkbox][disabled]+.toggle {
content: "";
display: inline-block;
width: 30px;
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 15px;
transition: background 0.3s ease;
vertical-align: middle;
}
.togglebutton label .toggle:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #FFFFFF;
border-radius: 20px;
position: relative;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -5px;
top: -2.5px;
border: 1px solid rgba(0, 0, 0, .54);
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}
.togglebutton label input[type=checkbox][disabled]+.toggle:after,
.togglebutton label input[type=checkbox][disabled]:checked+.toggle:after {
background-color: #BDBDBD;
}
.togglebutton label input[type=checkbox]+.toggle:active:after,
.togglebutton label input[type=checkbox][disabled]+.toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
.togglebutton label input[type=checkbox]:checked+.toggle:after {
left: 15px;
}
.togglebutton label input[type=checkbox]:checked+.toggle {
background-color: rgba(156, 39, 176, 0.7);
}
.togglebutton label input[type=checkbox]:checked+.toggle:after {
border-color: #9c27b0;
}
.togglebutton label input[type=checkbox]:checked+.toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(156, 39, 176, 0.1);
}
/* footer */
footer{
margin-top: 20px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
}
.footer p{
margin-bottom: 0;
font-size: 14px;
font-weight: 300;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover {
color: #9f26aa;
text-decoration: none;
}
/* animations */
@keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
$(document).ready(function() {
$('body').bootstrapMaterialDesign();
});
