<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="secure-lock" aria-label="Unlock setting">
  <input type="checkbox">
  <span>
    <i>
    </i>
    <b>
      ✓
    </b>
  </span>
</label>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.secure-lock{display:block;width:86px;height:86px;cursor:pointer}.secure-lock input{position:absolute;opacity:0}.secure-lock span{position:relative;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:#ff656b;box-shadow:8px 8px 16px #d94e5838,-6px -6px 14px #fff;transition:.35s}.secure-lock i{position:absolute;top:22px;width:29px;height:25px;border-radius:6px;background:#fff}.secure-lock i:before{content:"";position:absolute;left:6px;top:-18px;width:13px;height:18px;border:5px solid #fff;border-bottom:0;border-radius:12px 12px 0 0}.secure-lock b{position:absolute;color:transparent;font:700 28px Arial;transition:.25s}.secure-lock:hover span{transform:translateY(-4px)}.secure-lock input:checked+span{background:#58c890}.secure-lock input:checked+span i{transform:rotateY(180deg);opacity:0}.secure-lock input:checked+span b{color:#fff;transform:scale(1.1)}