/ Material Design

Material Design CheckBox And RadioButton

Material Design CheckBox And RadioButton

Material Design CheckBox And RadioButton

Material Design CheckBox And RadioButton //Twitter: @yusufbkrr //Like and rt for ty :)

Made with

Html
Css/SCSS
Javascript

Html

<div class="container">
   <div class="inputs">

      <div class="area">
         <div class="row">
            <div class="col-3">
               <span class="input">
							<label for="checkbox-1">CheckBox - 1</label>
							<input type="checkbox" name="checkbox" id="checkbox-1">
						</span>
            </div>
            <div class="col-3">
               <span class="input">
							<label for="checkbox-2">CheckBox - 2</label>
							<input type="checkbox" name="checkbox" id="checkbox-2">
						</span>
            </div>
            <div class="col-3">
               <span class="input">
							<label for="checkbox-3">CheckBox - 3</label>
							<input type="checkbox" name="checkbox" id="checkbox-3">
						</span>
            </div>
            <div class="col-3">
               <span class="input">
							<label for="checkbox-4">CheckBox - 4</label>
							<input type="checkbox" name="checkbox" id="checkbox-4">
						</span>
            </div>
         </div>
      </div>

      <div class="area">
         <div class="row">
            <div class="col-3">
               <span class="input">
							<label for="radio-1">RadioButton - 1</label>
							<input type="radio" name="radio" id="radio-1">
						</span>
            </div>
            <div class="col-3">
               <span class="input">
							<label for="radio-2">RadioButton - 2</label>
							<input type="radio" name="radio" id="radio-2">
						</span>
            </div>
            <div class="col-3">
               <span class="input">
							<label for="radio-3">RadioButton - 3</label>
							<input type="radio" name="radio" id="radio-3">
						</span>
            </div>
            <div class="col-3">
               <span class="input">
							<label for="radio-4">RadioButton - 4</label>
							<input type="radio" name="radio" id="radio-4">
						</span>
            </div>
         </div>
      </div>


   </div>
</div>

Css

.text {
   width: 100%;
   text-align: center;
   margin-top: 20px;
   height: 70px;
}

.area {
   width: 100%;
   float: left;
   margin-top: 15px;
}

.area .input,
.area .input label {
   width: 100%;
   float: left;
   position: relative;
}

.area .input {
   overflow: hidden;
   border-radius: 2px;
   color: #fff;
  background-color: #26a69a;
   box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   transition: 300ms;
   -webkit-transition: 300ms;
   -ms-transition: 300ms;
}

.area .input input {
   display: none;
}

.area .input label {
   font-weight: 400;
   color: #fff;
   text-align: center;
   text-transform:uppercase;
   cursor: pointer;
   font-size: 14px;
   z-index: 3;
   transition: 300ms;
   -webkit-transition: 300ms;
   -ms-transition: 300ms;
   height: 45px;
   line-height: 45px;
}

.area .input:hover{
   box-shadow:0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}
.area .input label:hover {
   letter-spacing: .8px;
   
}

.click-efect {
   position: absolute;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 50%;
}

.container {
   width: 100%;
   max-width: 800px;
    position: absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);         
   -webkit-transform:translate(-50%,-50%);
   -ms-transform:translate(-50%,-50%);

}

.col-3 {
   width: 25%;
   float: left;
   padding: 0 15px;
}

.row {
   margin: 0 -15px;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700&subset=latin,latin-ext);
*,
*:after,
*::before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   text-decoration: none;
}

body {
   font-family: 'Roboto', sans-serif;
}

Javascript

$(".area .input").click(function(e) {

   $("label[type='checkbox']", this)
   var pX = e.pageX,
      pY = e.pageY,
      oX = parseInt($(this).offset().left),
      oY = parseInt($(this).offset().top);

   $(this).addClass('active');

   if ($(this).hasClass('active')) {
      $(this).removeClass('active')
      if ($(this).hasClass('active-2')) {
         if ($("input", this).attr("type") == "checkbox") {
            if ($("span", this).hasClass('click-efect')) {
               $(".click-efect").css({
                  "margin-left": (pX - oX) + "px",
                  "margin-top": (pY - oY) + "px"
               })
               $(".click-efect", this).animate({
                  "width": "0",
                  "height": "0",
                  "top": "0",
                  "left": "0"
               }, 400, function() {
                  $(this).remove();
               });
            } else {
               $(this).append('<span class="click-efect x-' + oX + ' y-' + oY + '" style="margin-left:' + (pX - oX) + 'px;margin-top:' + (pY - oY) + 'px;"></span>')
               $('.x-' + oX + '.y-' + oY + '').animate({
                  "width": "500px",
                  "height": "500px",
                  "top": "-250px",
                  "left": "-250px",
               }, 600);
            }
         }

         if ($("input", this).attr("type") == "radio") {

            $(".area .input input[type='radio']").parent().removeClass('active-radio').addClass('no-active-radio');
            $(this).addClass('active-radio').removeClass('no-active-radio');

            $(".area .input.no-active-radio").each(function() {
               $(".click-efect", this).animate({
                  "width": "0",
                  "height": "0",
                  "top": "0",
                  "left": "0"
               }, 400, function() {
                  $(this).remove();
               });
            });

            if (!$("span", this).hasClass('click-efect')) {
               $(this).append('<span class="click-efect x-' + oX + ' y-' + oY + '" style="margin-left:' + (pX - oX) + 'px;margin-top:' + (pY - oY) + 'px;"></span>')
               $('.x-' + oX + '.y-' + oY + '').animate({
                  "width": "500px",
                  "height": "500px",
                  "top": "-250px",
                  "left": "-250px",
               }, 600);
            }

         }
      }
      if ($(this).hasClass('active-2')) {
         $(this).removeClass('active-2')
      } else {
         $(this).addClass('active-2');
      }
   }

});

Author

Yusuf Bakır

Demo

See the Pen Material Design CheckBox And RadioButton by Yusuf Bakır (@yusufbkr) on CodePen.