:root {
      --btn-gradient-border: conic-gradient(from 0 at 50% 50%, rgba(255, 255, 255, .5) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, .5) 360deg);
      --btn-gradient-border-hover: conic-gradient(from 0 at 50% 50%, rgba(255, 255, 255, .5) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, .5) 360deg);
      --btn-gradient-bg: conic-gradient(from 0 at 50% 50%, rgba(255, 255, 255, 0.3) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0.3) 280deg, rgba(255, 255, 255, 0.3) 180deg);
      --btn-gradient-border-size: 1px solid;
      --btn-gradient-border-color: #333333;
      --btn-gradient-border-color-hover: #333333;
      --btn-gradient-bg-opacity: 0.1;
      --btn-gradient-bg-opacity-hover: 0.6;
      --btn-gradient-border-radius: 100px;
    }


    .btn-wrapper {
      width: 100%;
      height: 100%;
      border: var(--btn-gradient-border-size);
      position: absolute;
      left: 50% !important;
      border-radius: var(--btn-gradient-border-radius);
      top: 50% !important;
      transform: translate(-50%, -50%);
      content: "";
      inset: 0;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      -webkit-mask-composite: clear;
    }

    .btn-gradient-animation .tn-atom {
      transition: all 0.4s !important;
    }

    .btn-bg-wrapper {
      height: 100%;
      overflow: hidden;
      position: absolute;
      width: 100%;
      top: 50%;
      border-radius: var(--btn-gradient-border-radius);
      left: 50%;
      z-index: -1;
      transform: translate(-50%, -50%);
    }

    .btn-gradient-animation .btn-gradient-bg {
      width: 500px;
      height: 500px;
      opacity: var(--btn-gradient-bg-opacity);
      transition: all 0.4s;
      -webkit-animation: borderTurn 2.5s infinite linear;
      background-image: var(--btn-gradient-bg);
      position: absolute;
      top: 50%;
      z-index: -2;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .btn-gradient-animation:hover .btn-gradient-bg {
      opacity: var(--btn-gradient-bg-opacity-hover);
    }

    .btn-gradient-animation:hover .tn-atom {
      transition: all 0.4s !important;
    }

    .btn-gradient-animation .btn-gradient {
      transition: all 0.4s;
      -webkit-animation: borderTurn 2.5s infinite linear;
      width: 500px;
      height: 500px;
      background: var(--btn-gradient-border-color);
      background-image: var(--btn-gradient-border);
      position: absolute;
      top: 50%;
      z-index: -1;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .btn-gradient-animation:hover .btn-gradient {
      background: var(--btn-gradient-border-color-hover);
      background-image: var(--btn-gradient-border-hover);
    }

    @keyframes borderTurn {
      0% {
        transform: translate(-50%, -50%) rotate(0);
      }

      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    @-webkit-keyframes borderTurn {
      0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
      }

      to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
      }
    }
</style>