RL button

by Andrey Izman

HTML

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="circle">
    <circle cx="8" cy="8" r="7.5"></circle>
  </symbol>
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="check">
    <path d="M4.76499011,6.7673683 L8.2641848,3.26100386 C8.61147835,2.91299871 9.15190114,2.91299871 9.49919469,3.26100386 C9.51164115,3.27347582 9.52370806,3.28637357 9.53537662,3.29967699 C9.83511755,3.64141434 9.81891834,4.17816549 9.49919469,4.49854425 L5.18121271,8.82537365 C4.94885368,9.05820878 4.58112654,9.05820878 4.34876751,8.82537365 L2.50080531,6.97362503 C2.48835885,6.96115307 2.47629194,6.94825532 2.46462338,6.93495189 C2.16488245,6.59321455 2.18108166,6.0564634 2.50080531,5.73608464 C2.84809886,5.3880795 3.38852165,5.3880795 3.7358152,5.73608464 L4.76499011,6.7673683 Z"></path>
  </symbol>
</svg>

<a class="rlg-btn-giveaway" data-giveaway="dueling-dragons-2022" rel="noopener">
  <span>
    <svg>
      <use xlink:href="#circle">
      </use>
    </svg>
    <svg>
      <use xlink:href="#check">
      </use>
    </svg>
  </span>
  <ul>
    <li>Join giveaway</li>
    <li>Loading...</li>
    <li style="color:#000">You're entered!</li>
  </ul>
</a>

CSS

body {
  background: #22242c;
  background-image: linear-gradient(180deg,rgba(23,24,29,.35) 130px,#22242c 240px);
}


.rlg-btn-giveaway {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  display: table;
  background: 0 0;
  box-shadow: 0 4px 20px rgb(255 255 255 / 15%);
  line-height: 20px;
  padding: 12px;
  border-radius: 5px;
  border: 2px solid #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease,box-shadow .3s ease,-webkit-transform .2s ease;
  transition: transform .2s ease,background .3s ease,box-shadow .3s ease;
  transition: transform .2s ease,background .3s ease,box-shadow .3s ease,-webkit-transform .2s ease;
}

.rlg-btn-giveaway span svg {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 50%;
  top: 50%;
  margin: -6px 0 0 -6px;
  z-index: 1;
}

.rlg-btn-giveaway span svg:nth-child(1) {
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  fill: none;
  margin: 0;
  stroke: #fff;
  stroke-width: 2px;
  stroke-dashoffset: 94.248;
  stroke-dasharray: 47.124;
}
.rlg-btn-giveaway span svg:nth-child(2) {
  fill: #fff;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  transition: opacity .3s ease,-webkit-transform .4s cubic-bezier(.175,.885,.32,1.275);
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275),opacity .3s ease;
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275),opacity .3s ease,-webkit-transform .4s cubic-bezier(.175,.885,.32,1.275);
}

.rlg-btn-giveaway span {
  display: none;
  vertical-align: top;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 4px 0 0;
  position: relative;
  overflow: hidden;
}
.rlg-btn-giveaway.loading span {
  display: inline-block;
  background: 0 0;
  transition: background .1s ease .3s;
}
.rlg-btn-giveaway.loading.done span {
  display: inline-block;
  background: #000;
  transition: background .1s ease 0s;
}

.rlg-btn-giveaway.loading.done {
  background: #fff;
  box-shadow:...

JavaScript

$(".rlg-btn-giveaway").on("click",
  function() {
    var btn = $(this);
    if (!btn.is(".loading") || btn.is(".loading")) {
      if (btn.is(".done")) {
        btn.removeClass("done");
        setTimeout(() => {
          btn.removeClass("loading");
        }, 400);
      } else {
        btn.addClass("loading");
        setTimeout(() => {
          btn.addClass("done");
        }, 2000);
      }

    }
  }
);