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>
CSS
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);
}
});