ازرار التفاعل

رجوع

معاينة الكود المباشر

قسم الاكواد

HTML Code

<div class="area">
  <div class="area-wrapper">
    <div class="wrapper">
      <svg
        class="frame-mask"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 421 96"
        height="96"
        width="430"
      >
        <mask
          height="96"
          width="426"
          y="0"
          x="-1"
          maskUnits="userSpaceOnUse"
          style="mask-type: alpha"
          id="frame-mask"
        >
          <path
            stroke-width="6.5"
            stroke="white"
            d="M113.566 92H48.0036C23.7011 92 3.95304 72.2983 3.5 48V48C3.04696 23.7017 22.7011 4 47.0036 4H183.107M113.566 92C109.564 52.7232 136.58 13.9435 183.107 4M113.566 92H241.5M183.107 4C183.107 4 260.569 4 310 4M241.5 92H373.071C377.227 92 379.305 92 383.146 91.3991C386.987 90.7981 387.714 90.5649 389.168 90.0985C430.723 76.7696 432.074 18.6956 388.908 5.73838C387.404 5.28687 386.652 5.06111 383.039 4.53056C379.426 4 377.414 4 373.39 4C359.63 4 330.631 4 310 4M241.5 92C288 82 314.5 40 310 4"
          ></path>
        </mask>
        <g mask="url(#frame-mask)">
          <path
            fill="url(#frame-paint)"
            d="M-294.972 -8H14L-57.028 102H-366L-294.972 -8Z"
            class="frame-reflex"
          ></path>
        </g>
        <defs>
          <linearGradient
            gradientUnits="userSpaceOnUse"
            y2="126.311"
            x2="-75.1822"
            y1="-9.66471"
            x1="-286.27"
            id="frame-paint"
          >
            <stop stop-opacity="0.08" stop-color="white"></stop>
            <stop stop-opacity="0.35" stop-color="white" offset="0.495"></stop>
            <stop stop-opacity="0.58" stop-color="white" offset="0.4951"></stop>
            <stop stop-opacity="0.1" stop-color="white" offset="1"></stop>
          </linearGradient>
        </defs>
      </svg>

      <div class="frame">
        <div class="frame-inner"></div>
        <div class="frame-black">
          <div class="frame-buttons">
            <div class="wrap wrap-1">
              <input
                value="repeat"
                name="keyboard"
                id="button-1"
                aria-label="Repeat"
                type="radio"
              />

              <button class="button button-1">
                <span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 1026 999"
                    height="1em"
                    width="1em"
                  >
                    <g class="g-1">
                      <path
                        stroke-linecap="round"
                        stroke="currentColor"
                        d="M986 959V695H724"
                        class="arrow"
                      ></path>
                      <path
                        stroke-linecap="round"
                        stroke="currentColor"
                        d="M74 697C258.085 1043.85 738.25 1043.5 928 695"
                        class="curve"
                      ></path>
                      <path
                        stroke-linecap="round"
                        stroke="currentColor"
                        d="M40 40V304H302"
                        class="arrow"
                      ></path>
                      <path
                        stroke-linecap="round"
                        stroke="currentColor"
                        d="M952 302C767.915 -44.8452 287.75 -44.4968 98 304"
                        class="curve"
                      ></path>
                    </g>
                    <g class="g-2">
                      <path
                        stroke-linecap="round"
                        stroke="currentColor"
                        d="M986 959V695H724"
                        class="arrow"
                      ></path>
                      <path
                        stroke-linecap="round"
                        stroke="currentColor"
                        d="M74 697C258.085 1043.85 738.25 1043.5 928 695"
                        class="curve"
                      ></path>
                      <path
                        stroke-linecap="round"
                        stroke="currentColor"
                        d="M40 40V304H302"
                        class="arrow"
                      ></path>
                      <path
                        stroke-linecap="round"
                        stroke="currentColor"
                        d="M952 302C767.915 -44.8452 287.75 -44.4968 98 304"
                        class="curve"
                      ></path>
                    </g>
                    <defs>
                      <filter id="glow">
                        <feGaussianBlur
                          stdDeviation="30"
                          in="SourceGraphic"
                        ></feGaussianBlur>
                      </filter>
                      <filter height="120" width="120" id="f1">
                        <feOffset dy="20" dx="20" in="SourceGraphic"></feOffset>
                        <feBlend in2="offOut" in="SourceGraphic"></feBlend>
                      </filter>
                    </defs>
                  </svg>
                </span>
              </button>
              <div class="layer layer-2"></div>
              <div class="layer layer-1"></div>
            </div>

            <div class="wrap wrap-2">
              <input
                value="play"
                name="keyboard"
                id="button-2"
                aria-label="Play"
                type="radio"
              />

              <button class="button button-2">
                <span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 224 67"
                    height="67"
                    width="224"
                    class="play"
                  >
                    <g class="play-text">
                      <rect fill="currentColor" height="7" width="7"></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        x="10"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        x="20"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        x="30"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="10"
                        x="40"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="20"
                        x="40"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                        x="20"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                        x="30"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                        x="10"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="10"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="40"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="20"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="50"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="60"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        x="59"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="60"
                        x="79"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="60"
                        x="89"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="60"
                        x="99"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="60"
                        x="69"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                        x="59"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="10"
                        x="59"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="40"
                        x="59"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="20"
                        x="59"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="50"
                        x="59"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="60"
                        x="59"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        x="128"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        x="138"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        x="148"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="10"
                        x="158"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="20"
                        x="158"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                        x="158"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                        x="138"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                        x="148"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                        x="128"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                        x="118"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="10"
                        x="118"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="40"
                        x="118"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="40"
                        x="158"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="20"
                        x="118"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="50"
                        x="118"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="60"
                        x="118"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="50"
                        x="158"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="60"
                        x="158"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        x="177"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        x="217"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="10"
                        x="217"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="20"
                        x="217"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                        x="207"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="40"
                        x="197"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="50"
                        x="197"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="60"
                        x="197"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="30"
                        x="187"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="10"
                        x="177"
                      ></rect>
                      <rect
                        fill="currentColor"
                        height="7"
                        width="7"
                        y="20"
                        x="177"
                      ></rect>
                    </g>
                    <mask
                      height="67"
                      width="224"
                      y="0"
                      x="0"
                      maskUnits="userSpaceOnUse"
                      style="mask-type: alpha"
                      id="play-mask"
                    >
                      <rect fill="black" height="7" width="7"></rect>
                      <rect fill="black" height="7" width="7" x="10"></rect>
                      <rect fill="black" height="7" width="7" x="20"></rect>
                      <rect fill="black" height="7" width="7" x="30"></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="10"
                        x="40"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="20"
                        x="40"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="30"
                        x="20"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="30"
                        x="30"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="30"
                        x="10"
                      ></rect>
                      <rect fill="black" height="7" width="7" y="30"></rect>
                      <rect fill="black" height="7" width="7" y="10"></rect>
                      <rect fill="black" height="7" width="7" y="40"></rect>
                      <rect fill="black" height="7" width="7" y="20"></rect>
                      <rect fill="black" height="7" width="7" y="50"></rect>
                      <rect fill="black" height="7" width="7" y="60"></rect>
                      <rect fill="black" height="7" width="7" x="59"></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="60"
                        x="79"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="60"
                        x="89"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="60"
                        x="99"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="60"
                        x="69"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="30"
                        x="59"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="10"
                        x="59"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="40"
                        x="59"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="20"
                        x="59"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="50"
                        x="59"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="60"
                        x="59"
                      ></rect>
                      <rect fill="black" height="7" width="7" x="128"></rect>
                      <rect fill="black" height="7" width="7" x="138"></rect>
                      <rect fill="black" height="7" width="7" x="148"></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="10"
                        x="158"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="20"
                        x="158"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="30"
                        x="158"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="30"
                        x="138"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="30"
                        x="148"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="30"
                        x="128"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="30"
                        x="118"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="10"
                        x="118"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="40"
                        x="118"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="40"
                        x="158"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="20"
                        x="118"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="50"
                        x="118"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="60"
                        x="118"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="50"
                        x="158"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="60"
                        x="158"
                      ></rect>
                      <rect fill="black" height="7" width="7" x="177"></rect>
                      <rect fill="black" height="7" width="7" x="217"></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="10"
                        x="217"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="20"
                        x="217"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="30"
                        x="207"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="40"
                        x="197"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="50"
                        x="197"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="60"
                        x="197"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="30"
                        x="187"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="10"
                        x="177"
                      ></rect>
                      <rect
                        fill="black"
                        height="7"
                        width="7"
                        y="20"
                        x="177"
                      ></rect>
                    </mask>
                    <g mask="url(#play-mask)">
                      <path
                        fill="url(#play-paint)"
                        d="M-195 77H0.999995V-10H-195V77Z"
                        class="play-mask"
                      ></path>
                    </g>
                    <defs>
                      <linearGradient
                        gradientUnits="userSpaceOnUse"
                        y2="33.5"
                        x2="1"
                        y1="33.5"
                        x1="-195"
                        id="play-paint"
                      >
                        <stop
                          stop-opacity="0"
                          stop-color="currentColor"
                          offset="0.05"
                        ></stop>
                        <stop stop-color="currentColor" offset="0.5"></stop>
                        <stop
                          stop-opacity="0"
                          stop-color="currentColor"
                          offset="0.95"
                        ></stop>
                      </linearGradient>
                    </defs>
                  </svg>
                </span>
              </button>
            </div>

            <div class="wrap wrap-3">
              <input
                value="rec"
                name="keyboard"
                id="button-3"
                aria-label="Rec"
                type="radio"
              />

              <button class="button button-3 button--led">
                <span>REC</span>
                <div class="led"></div>
              </button>
              <div class="layer layer-2"></div>
              <div class="layer layer-1"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="noise">
  <svg height="100%" width="100%">
    <defs>
      <pattern
        height="500"
        width="500"
        patternUnits="userSpaceOnUse"
        id="noise-pattern"
      >
        <filter y="0" x="0" id="noise">
          <feTurbulence
            stitchTiles="stitch"
            numOctaves="3"
            baseFrequency="0.65"
            type="fractalNoise"
          ></feTurbulence>
          <feBlend mode="screen"></feBlend>
        </filter>
        <rect filter="url(#noise)" height="500" width="500"></rect>
      </pattern>
    </defs>
    <rect fill="url(#noise-pattern)" height="100%" width="100%"></rect>
  </svg>
</div>

CSS Code

.area {
  --ease-elastic: cubic-bezier(0.5, 2, 0.3, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;

  .area-wrapper {
    padding: 60px 0;

    &:hover .wrapper {
      transform: translateY(0) scale(1);
      box-shadow: 0 20px 50px -5px black;
    }
  }
}

.wrapper {
  width: 440px;
  height: 108px;
  border-radius: 100px;
  position: relative;
  z-index: 2;
  transition: all 0.6s var(--ease-elastic);
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 30px 70px -5px black;

  .frame-mask {
    position: absolute;
    top: 0px;
    bottom: 0;
    right: 0;
    left: -3px;
    z-index: 20;
    pointer-events: none;
    margin: auto;
  }

  .frame {
    border-radius: 100px;

    .frame-inner {
      position: absolute;
      inset: 0;
      background: #202226;
      border-radius: inherit;
      box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.09);
    }
    .frame-black {
      position: absolute;
      border-radius: inherit;
      background: black;
      inset: 7px 8px;
    }
    .frame-buttons {
      position: absolute;
      inset: 0 6px 6px 6px;
      border-radius: inherit;
      overflow: hidden;

      &::before {
        content: "";
        background: black;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 103px;
        right: 0;
        z-index: 3;
        border-radius: 100px 0 0 0;
      }
    }
    &::before {
      content: "";
      position: absolute;
      border-radius: inherit;
      inset: 0;
      background: #0d0d11;
      transform: translateY(10px);
      box-shadow: inset 5px -2px 6px 0px rgba(255, 255, 255, 0.05);
    }
  }
}

.wrap {
  position: absolute;
  pointer-events: none;
  width: 42%;
  top: 6px;
  bottom: 0;

  input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 10;
    cursor: pointer;
    pointer-events: all;
    user-select: none;
    outline: none;
  }

  .button {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #15161a;
    z-index: 2;
    transition:
      all 0.2s ease,
      transform 0.4s var(--ease-elastic);
    color: #535868;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    outline: none;
    border: 0;
  }

  input:hover ~ .button {
    transform: translateY(-4px);
  }

  &.wrap-1 {
    left: 0;

    .layer {
      content: "";
      position: absolute;
    }

    .layer-1 {
      border-radius: 100px 0 0 100px;
      inset: 0;
      background: linear-gradient(to bottom, #0b0b0b, #141414);
      mask: radial-gradient(
        90px at 193px 82px,
        transparent calc(100% - 1px),
        black
      );
    }

    .layer-2 {
      position: absolute;
      right: 16px;
      top: -4px;
      left: 40px;
      height: 6px;
      border-radius: 0 0 5px 0;
      background: linear-gradient(to left, #0c0c0c, rgba(255, 255, 255, 0));
      transform: translateY(4px);
      transition:
        all 0.3s ease,
        transform 0.3s var(--ease-elastic);
      z-index: 1;
    }

    .button {
      border-radius: 100px 0 0 100px;
      box-shadow:
        inset 7px 11px 3px -10px rgba(255, 255, 255, 0.06),
        inset -2px -2px 9px 0px rgba(255, 255, 255, 0.1),
        inset -10px 8px 19px 10px rgba(0, 0, 0, 0.3);
      mask: radial-gradient(
        90px at 193px 82px,
        transparent calc(100% - 1px),
        black
      );
      padding-right: 30%;

      &::before {
        content: "";
        position: absolute;
        left: 101px;
        bottom: -80px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        width: 170px;
        height: 170px;
        filter: blur(7px);
        transition: all 0.2s ease;
      }
    }
  }

  &.wrap-2 {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0px;
    margin: auto;
    width: 46%;
    z-index: 10;
    border-radius: 0 0 78px 0;
    overflow: hidden;

    input {
      z-index: 6;
    }

    &::after {
      content: "";
      position: absolute;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05),
        #141414
      );
      border-radius: 100px 5px 100px 5px;
      inset: 0;
      top: 6px;
    }

    span {
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        height: 18px;
        width: 70px;
        margin: auto;
        filter: blur(6px);
        background: rgba(0, 128, 255, 0.45);
        transition: all 0.5s ease;
      }
    }

    .play {
      position: relative;
      height: 20px;
      overflow: visible;

      .play-text {
        transition:
          all 0.1s ease,
          opacity 0.5s linear;
      }
    }

    .button {
      z-index: 3;
      top: 6px;
      bottom: 0;
      height: calc(100% - 6px);
      border-radius: 100px 5px 100px 5px;
      background: #061628;
      color: #00daff;
      box-shadow:
        inset 0 0 4px 0 rgba(255, 255, 255, 0.1),
        inset 0 6px 3px -4px rgba(255, 255, 255, 0.1),
        inset -10px -7px 15px -4px rgba(255, 255, 255, 0.05),
        inset 0 -8px 20px 10px rgba(0, 0, 0, 0.7);

      &::before {
        content: "";
        background: linear-gradient(
          136deg,
          rgba(255, 255, 255, 0.01) 0%,
          rgba(255, 255, 255, 0.04) 50%,
          rgba(255, 255, 255, 0.02) 51%,
          rgba(255, 255, 255, 0) 100%
        );
        box-shadow: inset 0 30px 10px rgba(0, 0, 0, 0.1);
        transition:
          all 0.3s ease,
          transform 0.4s var(--ease-elastic);
        opacity: 0.7;
        position: absolute;
        left: 13px;
        bottom: 11px;
        top: 0;
        right: 0;
        border-radius: 100px 10px 100px 10px;
        z-index: 4;
      }

      &::after {
        position: absolute;
        content: "";
        inset: 0;
        width: 170%;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.6) 50%,
          rgba(255, 255, 255, 1) 50%,
          rgba(255, 255, 255, 0.3) 100%
        );
        z-index: 10;
        opacity: 0.05;
        transform: translateX(-100%) skewX(-30deg);
      }
    }
  }
  &.wrap-3 {
    z-index: 4;
    right: 0;

    .layer {
      content: "";
      position: absolute;
    }

    .layer-1 {
      border-radius: 0 100px 100px 0;
      inset: 0;
      background: linear-gradient(to left, #0b0b0b, #0a0b0b);
      mask: radial-gradient(
        90px at -20px 0,
        transparent calc(100% - 1px),
        black
      );
    }
    .layer-2 {
      position: absolute;
      left: 16px;
      bottom: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(to right, #141414, rgba(255, 255, 255, 0));
      transform: translateY(5px);
      transition:
        all 0.3s ease,
        transform 0.4s var(--ease-elastic);
      z-index: 1;
    }

    .button {
      border-radius: 0 100px 100px 0;
      mask: radial-gradient(
        90px at -20px 0,
        transparent calc(100% - 1px),
        black
      );
      box-shadow:
        inset -7px 11px 3px -10px rgba(255, 255, 255, 0.06),
        inset -3px 2px 1px -1px rgba(255, 255, 255, 0.05),
        inset -5px -8px 8px -3px rgba(255, 255, 255, 0.05),
        inset 10px 8px 19px 10px rgba(0, 0, 0, 0.3);
      letter-spacing: 0.1rem;
      padding-left: 21%;
      font-size: 23px;

      &::before {
        content: "";
        position: absolute;
        right: 102px;
        top: -80px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.03);
        transition: 0.2s ease;
        width: 170px;
        height: 170px;
      }
    }
  }

  input:not(:checked):not(:active):hover ~ .button ~ .layer-2 {
    transform: translateY(0);
  }
}

.wrap-1 input:checked ~ .button,
.wrap-1 input:active ~ .button-1 {
  transform: translateY(4px) !important;
  box-shadow:
    inset 7px 21px 13px -10px rgba(0, 0, 0, 0.65),
    inset -2px -2px 9px 0px rgba(255, 255, 255, 0.1),
    inset -10px 8px 19px 10px rgba(0, 0, 0, 0.3);
  background: #111114;

  &::before {
    background: rgba(0, 0, 0, 0.2);
  }
}

.wrap-2 input:checked ~ .button,
.wrap-2 input:active ~ .button-2 {
  transform: translateY(4px) !important;
  background: #01160a;
  color: #92ff98;

  span {
    &::before {
      background: rgba(0, 255, 13, 0.25);
    }
  }

  box-shadow:
    inset 0 0 4px 0 rgb(0 0 0),
    inset 0 6px 3px -4px rgba(0, 0, 0, 0.14),
    inset -10px -7px 15px -4px rgba(0, 0, 0, 0.06),
    inset 0 -8px 20px 10px rgba(0, 0, 0, 0.7),
    inset 0 -10px 15px -5px rgba(255, 255, 255, 0.2);

  &::before {
    transform: translateX(10px) translateY(-3px);
  }
}

.wrap-3 input:checked ~ .button,
.wrap-3 input:active ~ .button-3 {
  transform: translateY(4px) !important;
  box-shadow:
    inset -7px 21px 13px -10px rgba(0, 0, 0, 0.5),
    inset -3px 2px 1px -1px rgba(0, 0, 0, 0.3),
    inset -5px -8px 8px -3px rgba(255, 255, 255, 0.05),
    inset 10px 8px 19px 10px rgba(0, 0, 0, 0.3);
  background: #111114;

  &::before {
    background: rgba(0, 0, 0, 0.3);
    filter: blur(5px);
  }
}

.led {
  position: absolute;
  right: 25px;
  top: 0;
  bottom: 0;

  margin: auto;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  transition: all 0.4s linear;

  background-color: #51ffe2;
  box-shadow:
    inset 0 3px 2px -1px white,
    0 0 25px 8px rgba(40, 248, 255, 0.3),
    0 0 0 2px rgba(0, 0, 0, 0.35),
    0 0 3px 4px rgba(0, 122, 152, 0.4);
}

@keyframes led {
  40%,
  60% {
    background-color: #ffad51;
    box-shadow:
      inset 0 3px 2px -1px white,
      0 0 25px 8px rgba(188, 38, 0, 0.7),
      0 0 0 2px rgba(0, 0, 0, 0.35),
      0 0 3px 4px rgba(152, 80, 0, 0.4);
  }
}

.wrap input:checked ~ .button--led .led {
  background-color: #5aff4e;
  box-shadow:
    inset 0 3px 2px -1px white,
    0 0 25px 8px rgba(60, 188, 0, 0.6),
    0 0 0 2px rgba(0, 0, 0, 0.35),
    0 0 3px 4px rgba(3, 152, 0, 0.6);

  animation: led 2s ease infinite;
}

.wrap input:hover ~ .button {
  transform: translateY(-4px);

  &.button-3 {
    .led {
      background-color: #ffad51;
      box-shadow:
        inset 0 3px 2px -1px white,
        0 0 25px 8px rgba(188, 38, 0, 0.7),
        0 0 0 2px rgba(0, 0, 0, 0.35),
        0 0 3px 4px rgba(152, 80, 0, 0.4);
    }
  }

  &.button-2 {
    &::after {
      animation: reflex 0.8s ease-out;
    }

    span {
      &::before {
        opacity: 0.4;
      }
    }
    .play {
      .play-text {
        opacity: 0.3;
      }
      .play-mask {
        animation: mask 1.5s ease infinite;
      }
    }
  }

  &.button-1 {
    svg {
      animation: 0.9s rotate var(--ease-elastic);
    }
  }
}

@keyframes reflex {
  0% {
    transform: translateX(-100%) skewX(-30deg);
  }
  100% {
    transform: translateX(100%) skewX(-30deg);
  }
}

@keyframes rotate {
  to {
    transform: rotate(-180deg);
  }
}

.wrap input:checked ~ .button-1 {
  .curve {
    animation: repeatCurve 1.5s ease infinite;
  }
  .arrow {
    animation: repeatArrow 1.5s ease infinite;
  }
}

@keyframes repeatCurve {
  0% {
    stroke-dashoffset: 1100;
  }
  50%,
  100% {
    stroke-dashoffset: -1100;
  }
}

@keyframes repeatArrow {
  0% {
    stroke-dashoffset: 580;
  }

  100% {
    stroke-dashoffset: -580;
  }
}

.wrapper:not(:hover) .frame-reflex {
  animation: mask 1.1s ease;
  opacity: 0.2;
}

@keyframes mask {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(190%);
  }
}

.button-1 svg {
  overflow: visible;
  transition: all 1s var(--ease-elastic);
  stroke-width: 80px;

  .g-2 {
    filter: url(#glow);
    color: white;
    stroke-width: 50px;
    .curve {
      stroke-dasharray: 1100;
      stroke-dashoffset: 1100;
    }

    .arrow {
      stroke-dasharray: 580;
      stroke-dashoffset: 580;
    }
  }
}

.noise {
  position: absolute;
  top: -25px;
  bottom: -20px;
  left: 0;
  right: 0;
  opacity: 0.07;
  mask-image: linear-gradient(
    transparent 5%,
    white 30%,
    white 70%,
    transparent 95%
  );
  filter: grayscale(1);
  pointer-events: none;
  z-index: 1;
}