<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="gradient-halo" aria-label="Choose gradient option">
  <input type="checkbox">
  <span>
    <i>
      ✓
    </i>
  </span>
</label>

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

.gradient-halo{display:block;width:92px;height:92px;cursor:pointer}.gradient-halo input{position:absolute;opacity:0}.gradient-halo span{display:grid;place-items:center;width:70px;height:70px;margin:11px;border-radius:50%;background:#fff;box-shadow:0 7px 14px #6b5b7933;transition:.35s}.gradient-halo span:before{content:"";position:absolute;z-index:-1;inset:-7px;border-radius:50%;background:conic-gradient(#ff8c84,#f3bd68,#6cd0a7,#6f8cea,#c87bd7,#ff8c84);filter:blur(1px);transition:.35s}.gradient-halo i{color:transparent;font:700 31px Arial;transition:.25s}.gradient-halo:hover span{transform:rotate(30deg)}.gradient-halo input:checked+span{background:#fff;box-shadow:0 0 0 7px #fff,0 10px 20px #826eae55;transform:rotate(180deg)}.gradient-halo input:checked+span:before{filter:blur(0);animation:halo-spin 2s linear infinite}.gradient-halo input:checked+span i{color:#7869d8}@keyframes halo-spin{to{transform:rotate(360deg)}}