<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="classic-outline" aria-label="Mark complete">
  <input type="checkbox">
  <span>
  </span>
</label>

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

.classic-outline{display:block;width:80px;height:80px;cursor:pointer}.classic-outline input{position:absolute;opacity:0}.classic-outline span{position:relative;display:block;width:54px;height:54px;margin:13px;border:4px solid #f6f6f6;border-radius:10px;background:#222;transition:.22s}.classic-outline span:after{content:"";position:absolute;display:none;left:17px;top:10px;width:13px;height:24px;border:solid #fff;border-width:0 5px 5px 0;transform:rotate(45deg)}.classic-outline:hover span{border-color:#c4c4c4}.classic-outline input:checked+span{border-color:#2d9bf0;background:#2d9bf0;box-shadow:0 6px 12px #2d9bf055}.classic-outline input:checked+span:after{display:block}