Suscribe Button CSS JS

Subscribe Button / Boton suscribete con Css, Html y JS

By: Sasha

<div class="wrap">
 <div>
 <input type="checkbox" id="toggle" />
 <label class="button" for="toggle" >
 </label>
 </div>
 <div class="parent">
 <div class="text sub">Subscribe Now </div>
 <div class="text thanks">Thanks for Subscribing </div>
 </div>
</div>

body{background:#21CDB2}
.wrap{height:100vh;display:flex;justify-content:center;align-items:center}
.wrap div{display:flex;justify-content:center;align-items:center;margin:8px}
.parent{position:relative}
.parent .sub{transition:all .5s ease-in-out}
.parent .thanks{font-size:13px;transition:all .5s ease-in-out;position:absolute;top:-5px;left:0;opacity:0}
.text{font-size:17px;color:#F5F5F5;font-family:'Open Sans',sans-serif;letter-spacing:2px;text-transform:uppercase;transition:all .5s ease-in-out}
#toggle{display:none}
.button{position:absolute;z-index:999;width:28px;height:28px;background:#F9F9F9;border-radius:10%;transition:all .5s ease-in-out;cursor:pointer}
.button:before{position:absolute;top:13px;left:6px;content:'';width:16px;height:2px;background:#21CDB2;transform:rotate(90deg)}
.button:after{position:absolute;top:13px;left:6px;content:'';width:16px;height:2px;background:#21CDB2}
#toggle:checked~.nav{opacity:1;transform:translateY(10%)}
#toggle:checked~.button{transform:rotate(135deg);box-shadow:0 0 transparent;border-radius:100%}
#toggle:checked~.subbed{opacity:1}

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

$('#toggle').click(function() {
  if ($(this).is(":checked")) {
    $(".sub").css("opacity", 0);
    $(".thanks").css("opacity", 1);
  } 
  else if ($(this).is(":not(:checked)")) {
     $(".sub").css("opacity", 1);
     $(".thanks").css("opacity", 0);
  }
});