<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-md-6 offset-md-3 mt-5"> <div class="customcard"> <h4 class="text-center mt-2">Checkbox</h4> <div class="form-group mt-4 gray-fill-checkbox form-check"> <input type="checkbox" id="customcheck1"/> <label class="gray-fill-label" for="customcheck1">gray checkbox</label> </div> <div class="form-group mt-4 gray-circle-checkbox form-check"> <input type="checkbox" id="customcheck2"> <label class="gray-circle-label" for="customcheck2">gray circle checkbox</label> </div> <div class="form-group mt-4 border-fill-checkbox form-check"> <input type="checkbox" class="" id="customcheck3"> <label class="border-fill-label" for="customcheck3">border checkbox</label> </div> <div class="form-group mt-4 border-circle-checkbox form-check"> <input type="checkbox" class="" id="customcheck4"> <label class="border-circle-label" for="customcheck4">border checkbox</label> </div> <div class="form-group mt-4 bg-fill-checkbox form-check"> <input type="checkbox" id="customcheck5"> <label class="bg-fill-label" for="customcheck5">bgcolor checkbox</label> </div> <div class="form-group bg-cirle-checkbox mt-4 form-check"> <input type="checkbox" class="" id="customcheck6"> <label class="bg-cirle-label" for="customcheck6">bgcolor circle checkbox</label> </div> <div class="form-group mt-4 outline-fill-checkbox form-check"> <input type="checkbox" id="customcheck7"> <label class="outline-fill-label" for="customcheck7">Outline checkbox</label> </div> </form> </div> </div> <div class="col-md-6 offset-md-3 mt-5"> <div class="customcard"> <h4 class="text-center mt-2">Input Fields</h4> <div class="input-group mt-4"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mt-4"> <input type="text" class="form-control rounded-input" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn rounded-btn" type="button">Go!</button> </span> </div><!-- /input-group --> <div class="form-group mt-4"> <input type="text" class="form-control round-input" placeholder="Name"> </div><!-- /input-group --> </div> </div> </div> </div>

.text-center{ text-align: center; } .mt-5{ margin-top: 3em; } .mt-2{ margin-top: 0.8em; } .mt-4{ margin-top: 2em; } .customcard{ box-shadow: 0px 8px 12px 2px rgb(0,0,0,0.24); border-radius: 10px; padding:10px; } input[type="checkbox"]{ margin-top: 0px !important; opacity: 0; } .gray-fill-checkbox label:before{ display: inline-block; content: ""; position: absolute; border: 2px solid #bbb7b7; background-color: #bbb7b7; border-radius: .25em; -webkit-appearance: none; width: 1.2em; height: 1.2em; margin: 2px -20px 0px !important } .gray-fill-checkbox input[type="checkbox"]:checked ~ .gray-fill-label:before{ content:'\2713'; line-height: 1; animation: btns_effect 250ms ease-in; } .gray-circle-checkbox label:before{ display: inline-block; content: ""; position: absolute; border: 2px solid #bbb7b7; background-color: #bbb7b7; border-radius: 1.2em; -webkit-appearance: none; width: 1.2em; height: 1.2em; margin: 2px -20px 0px !important } .gray-circle-checkbox input[type="checkbox"]:checked ~ .gray-circle-label:before{ line-height: .7; text-align: center; font-weight: bolder; content: '\25CF'; color:#000; font-size: 14px; animation: btns_effect 250ms ease-in; } .border-fill-checkbox label:before{ display: inline-block; content: ""; position: absolute; border: 2px solid #bbb7b7; background-color: #fff; border-radius: .25em; -webkit-appearance: none; width: 1.2em; height: 1.2em; margin: 2px -20px 0px !important; animation: btns_effect 250ms ease-in; } .border-fill-checkbox input[type="checkbox"]:checked ~ .border-fill-label:before{ line-height: 1; border-color: #49b293; content: '\2713'; color: #49b293; } .border-circle-checkbox label:before{ display: inline-block; content: ""; position: absolute; border: 2px solid #bbb7b7; background-color: #fff; border-radius: 2em; -webkit-appearance: none; width: 1.2em; height: 1.2em; margin: 2px -20px 0px !important } .border-circle-checkbox input[type="checkbox"]:checked ~ .border-circle-label:before{ line-height: .7; text-align: center; font-weight: bolder; content: '\25CF'; color: #49b293; border-color: #49b293; animation: btns_effect 250ms ease-in; } .bg-fill-checkbox label:before{ display: inline-block; content: ""; position: absolute; border: 2px solid #bbb7b7; background-color: #fff; border-radius: .25em; -webkit-appearance: none; width: 1.2em; height: 1.2em; margin: 2px -20px 0px !important } .bg-fill-checkbox input[type="checkbox"]:checked ~ .bg-fill-label:before{ text-align: center; font-weight: bolder; color: #fff; border-color: #49b293; background-color:#49b293; content: "\2713"; line-height: 0.9em; animation: btns_effect 250ms ease-in; } .bg-cirle-checkbox label:before{ display: inline-block; content: ""; position: absolute; border: 2px solid #bbb7b7; background-color: #fff; border-radius: 2em; -webkit-appearance: none; width: 1.2em; height: 1.2em; margin: 2px -20px 0px !important } .bg-cirle-checkbox input[type="checkbox"]:checked ~ .bg-cirle-label:before{ font-size: 14px; line-height: 1em; text-align: center; font-weight: bolder; content: '\2713'; color: #fff; border-color: #49b293; background-color:#49b293; animation: btns_effect 250ms ease-in; } .outline-fill-checkbox label:before{ display: inline-block; content: ""; position: absolute; border: 2px solid #49b293; border-radius: .25em; -webkit-appearance: none; width: 1.2em; height: 1.2em; margin: 2px -20px 0px !important } .outline-fill-checkbox input[type="checkbox"]:checked ~ .outline-fill-label:before{ text-align: center; font-weight: bolder; color: #49b293; content: "\25a0"; font-size: 14px; line-height: 0.7; animation: btns_effect 250ms ease-in; } .customcard{ box-shadow: 0px 8px 12px 2px rgb(0,0,0,0.24); border-radius: 10px; padding:10px; } .customcard .input-group-addon{ color: #f7f7f7; font-weight: 600; background-color: #6cbece; border: 1px solid #6cbece; } .customcard input[type="text"]{ border: 2px solid #6cbece; } .customcard .simple-btn{ background: #6cbece; border: 1px solid #6cbece; color: #fff; font-weight: 600; } .rounded-input{ border-top-left-radius: 30px; border-bottom-left-radius: 30px; } .rounded-btn{ border-top-right-radius: 30px; border-bottom-right-radius: 30px; background: #6cbece; border: 1px solid #6cbece; color: #fff; font-weight: 600; } .rounded-btn:hover, .rounded-btn:focus, .rounded-btn:active:focus{ color: #fff; outline: none; } .round-input{ border-radius: 20px !important; } @keyframes btns_effect{ 0%{transform: scale(0);} 25%{transform: scale(1.3);} 75%{transform: scale(1.4);} 100%{transform: scale(1);} }