<!--
  Author: @codepeek
  License: MIT
  Tags: #neumorphism
-->
<label class="mint-cloud" aria-label="Enable cloud option">
  <input type="checkbox">
  <span>
    <b>
      ✓
    </b>
  </span>
</label>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #neumorphism
 */

.mint-cloud{display:block;width:92px;height:80px;cursor:pointer}.mint-cloud input{position:absolute;opacity:0}.mint-cloud span{position:relative;display:grid;place-items:center;width:76px;height:52px;margin:20px auto 0;border-radius:35px;background:#e4faf8;box-shadow:9px 9px 17px #a2d9d4,-9px -9px 17px #fff;transition:.35s}.mint-cloud span:before,.mint-cloud span:after{content:"";position:absolute;border-radius:50%;background:inherit}.mint-cloud span:before{width:43px;height:43px;left:10px;top:-19px}.mint-cloud span:after{width:31px;height:31px;right:11px;top:-12px}.mint-cloud b{position:relative;z-index:1;color:transparent;font:700 29px Arial;transition:.25s}.mint-cloud:hover span{box-shadow:inset 7px 7px 12px #a2d9d4,inset -7px -7px 12px #fff}.mint-cloud input:checked+span{background:#61d9c5;box-shadow:none;transform:translateY(2px)}.mint-cloud input:checked+span b{color:#fff}