CSS下的Button（七）

示例

代码

<label class="my-btn7">
  <input type="checkbox" checked="checked" />
  <svg
    class="play"
    xmlns="http://www.w3.org/2000/svg"
    height="1em"
    viewBox="0 0 384 512"
  >
    <path
      d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"
    ></path>
  </svg>
  <svg
    class="pause"
    xmlns="http://www.w3.org/2000/svg"
    height="1em"
    viewBox="0 0 320 512"
  >
    <path
      d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"
    ></path>
  </svg>
</label>

/*------ Settings ------*/
.my-btn7 {
  --color: white;
  --size: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: var(--size);
  user-select: none;
  fill: var(--color);
}

.my-btn7 .play {
  position: absolute;
  animation: keyframes-fill 0.3s;
}

.my-btn7 .pause {
  position: absolute;
  display: none;
  animation: keyframes-fill 0.3s;
}

/* ------ On check event ------ */
.my-btn7 input:checked ~ .play {
  display: none;
}

.my-btn7 input:checked ~ .pause {
  display: block;
}

/* ------ Hide the default checkbox ------ */
.my-btn7 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* ------ Animation ------ */
@keyframes keyframes-fill {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
  }
}