<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div class="container">
<div class="row">
<h2>Buttons + CheckBox (WithOut JavaScript CSS)</h2>
</div>
<div class="row">
<div class="col">
<div class="custom-chkbx-j">
<input id="chkbx-text" type="checkbox" hidden/>
<div class="btn-group">
<label class="btn btn-art-j" for="chkbx-text">
<label for="chkbx-text" class="m-0">
<span class="far fa-check-square"></span>
<span class="far fa-square"></span>
</label>
<label for="chkbx-text" class="m-0">Texto</label>
</label>
</div>
</div>
</div>
</div>
</div>
.btn-art-j {
background-color: #2193b0; /* fallback for old browsers */
background-color: -webkit-linear-gradient(to right, #6dd5ed, #2193b0); /* Chrome 10-25, Safari 5.1-6 */
background-color: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
border: 3px solid #eee;
}
.btn-art-j:hover {
background-color: #ec008c; /* fallback for old browsers */
background-color: -webkit-linear-gradient(to right, #fc6767, #ec008c); /* Chrome 10-25, Safari 5.1-6 */
background-color: linear-gradient(to right, #fc6767, #ec008c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
}
/* Dibuja el icono
1- Check
2- Circle
*/
.custom-chkbx-j input[type="checkbox"] + .btn-group > label span:first-child {
display: none;
}
.custom-chkbx-j input[type="checkbox"] + .btn-group > label span:last-child {
display: inline-block;
}
.custom-chkbx-j input[type="checkbox"]:checked + .btn-group > label {
background-color: #ec008c; /* fallback for old browsers */
background-color: -webkit-linear-gradient(to right, #fc6767, #ec008c); /* Chrome 10-25, Safari 5.1-6 */
background-color: linear-gradient(to right, #fc6767, #ec008c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
border: 3px solid #eee;
}
.custom-chkbx-j input[type="checkbox"]:checked + .btn-group > label:hover {
background-color: #2193b0; /* fallback for old browsers */
background-color: -webkit-linear-gradient(to right, #6dd5ed, #2193b0); /* Chrome 10-25, Safari 5.1-6 */
background-color: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
border: 3px solid #eee;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
}
.custom-chkbx-j input[type="checkbox"]:checked + .btn-group > label span:first-child {
display: inline-block;
}
.custom-chkbx-j input[type="checkbox"]:checked + .btn-group > label span:last-child {
display: none;
}
