Button 08

<a href="#" class="button-solid">テキスト</a>

/* reset */
:where(a, button).button-solid {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

:where(button).button-solid {
  vertical-align: middle;
  text-align: inherit;
}

/* snippet */
.button-solid {
  --button-background: #2b36f5;
  --button-background-hover: #1f28a8;
  --button-color: #fff;
  --button-focus-color: #2b36f5;

  display: inline-grid;
  place-items: center;
  width: 100%;
  max-width: 320px;
  padding: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--button-color);
  background-color: var(--button-background);
  border-radius: calc(infinity * 1px);

  @media (any-hover: hover) {
    transition: background-color 0.3s;

    &:hover {
      background-color: var(--button-background-hover);
    }
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--button-focus-color);
    outline-offset: 2px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .button-solid {
    @media (any-hover: hover) {
      transition: none;
    }
  }
}

<a href="#" class="button-outline">テキスト</a>

/* reset */
:where(a, button).button-outline {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

:where(button).button-outline {
  vertical-align: middle;
  text-align: inherit;
}

/* snippet */
.button-outline {
  --button-border: #2b36f5;
  --button-background-hover: #2b36f5;
  --button-color: #2b36f5;
  --button-color-hover: #fff;
  --button-focus-color: #2b36f5;

  display: inline-grid;
  place-items: center;
  width: 100%;
  max-width: 320px;
  padding: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--button-color);
  background-color: transparent;
  border: 2px solid var(--button-border);
  border-radius: calc(infinity * 1px);

  @media (any-hover: hover) {
    transition:
      background-color 0.3s,
      color 0.3s;

    &:hover {
      color: var(--button-color-hover);
      background-color: var(--button-background-hover);
    }
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--button-focus-color);
    outline-offset: 2px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .button-outline {
    @media (any-hover: hover) {
      transition: none;
    }
  }
}

<a href="#" class="button-gradient">テキスト</a>

/* reset */
:where(a, button).button-gradient {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

:where(button).button-gradient {
  vertical-align: middle;
  text-align: inherit;
}

/* snippet */
.button-gradient {
  --button-gradient-start: #2b36f5;
  --button-gradient-middle: #7c3aed;
  --button-gradient-end: #d946ef;
  --button-color: #fff;
  --button-focus-color: #2b36f5;
  --button-duration: 0.4s;
  --button-easing: cubic-bezier(0.65, 0, 0.35, 1);

  display: inline-grid;
  place-items: center;
  width: 100%;
  max-width: 320px;
  padding: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--button-color);
  background-image: linear-gradient(
    in oklch to right,
    var(--button-gradient-start),
    var(--button-gradient-middle),
    var(--button-gradient-end),
    var(--button-gradient-end),
    var(--button-gradient-middle),
    var(--button-gradient-start)
  );
  background-position: 0% 0%;
  background-size: 200% 100%;
  border-radius: calc(infinity * 1px);

  @media (any-hover: hover) {
    transition: background-position var(--button-duration) var(--button-easing);

    &:hover {
      background-position: 100% 0%;
    }
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--button-focus-color);
    outline-offset: 2px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .button-gradient {
    @media (any-hover: hover) {
      transition: none;
    }
  }
}

<a href="#" class="button-hover-fill-bottom">テキスト</a>

/* reset */
:where(a, button).button-hover-fill-bottom {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

:where(button).button-hover-fill-bottom {
  vertical-align: middle;
  text-align: inherit;
}

/* snippet */
.button-hover-fill-bottom {
  --button-background: #2b36f5;
  --button-background-hover: #1f28a8;
  --button-color: #fff;
  --button-focus-color: #2b36f5;
  --button-duration: 0.4s;
  --button-easing: cubic-bezier(0.65, 0, 0.35, 1);

  display: inline-grid;
  place-items: center;
  width: 100%;
  max-width: 320px;
  padding: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--button-color);
  background-color: var(--button-background);
  background-image: linear-gradient(
    var(--button-background-hover),
    var(--button-background-hover)
  );
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 0%;
  border-radius: calc(infinity * 1px);

  @media (any-hover: hover) {
    transition: background-size var(--button-duration) var(--button-easing);

    &:hover {
      background-size: 100% 100%;
    }
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--button-focus-color);
    outline-offset: 2px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .button-hover-fill-bottom {
    @media (any-hover: hover) {
      transition: none;
    }
  }
}

<a href="#" class="button-hover-press">テキスト</a>

/* reset */
:where(a, button).button-hover-press {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

:where(button).button-hover-press {
  vertical-align: middle;
  text-align: inherit;
}

/* snippet */
.button-hover-press {
  --button-background: #2b36f5;
  --button-shadow-color: #1a2080;
  --button-color: #fff;
  --button-focus-color: #2b36f5;
  --button-depth: 6px;
  --button-duration: 0.4s;
  --button-easing: cubic-bezier(0.65, 0, 0.35, 1);

  display: inline-grid;
  place-items: center;
  width: 100%;
  max-width: 320px;
  padding: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--button-color);
  background-color: var(--button-background);
  border-radius: calc(infinity * 1px);
  box-shadow: 0 var(--button-depth) 0 var(--button-shadow-color);
  transform: translateY(0);

  @media (any-hover: hover) {
    transition:
      transform var(--button-duration) var(--button-easing),
      box-shadow var(--button-duration) var(--button-easing);

    &:hover {
      box-shadow: 0 0 0 var(--button-shadow-color);
      transform: translateY(var(--button-depth));
    }
  }

  &:active {
    box-shadow: 0 0 0 var(--button-shadow-color);
    transform: translateY(var(--button-depth));
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--button-focus-color);
    outline-offset: 2px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .button-hover-press {
    @media (any-hover: hover) {
      transition: none;
    }
  }
}

<a href="#" class="button-icon-arrow button-icon-arrow--right">
  テキスト
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path
      d="M10 6L15.2929 11.2929C15.6834 11.6834 15.6834 12.3166 15.2929 12.7071L10 18"
    />
  </svg>
</a>

<a href="#" class="button-icon-arrow button-icon-arrow--left">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path
      d="M14 6L8.70711 11.2929C8.31658 11.6834 8.31658 12.3166 8.70711 12.7071L14 18"
    />
  </svg>
  テキスト
</a>

/* reset */
:where(a, button).button-icon-arrow {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

:where(button).button-icon-arrow {
  vertical-align: middle;
  text-align: inherit;
}

/* snippet */
.button-icon-arrow {
  --button-background: #2b36f5;
  --button-background-hover: #1f28a8;
  --button-color: #fff;
  --button-focus-color: #2b36f5;

  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  padding: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--button-color);
  background-color: var(--button-background);
  border-radius: calc(infinity * 1px);

  svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  @media (any-hover: hover) {
    transition: background-color 0.3s;

    svg {
      transition: transform 0.3s;
    }

    &:hover {
      background-color: var(--button-background-hover);
    }
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--button-focus-color);
    outline-offset: 2px;
  }
}

.button-icon-arrow--right {
  &::before {
    content: "";
  }

  svg {
    grid-column: 3;
    justify-self: end;
  }

  @media (any-hover: hover) {
    &:hover svg {
      transform: translateX(4px);
    }
  }
}

.button-icon-arrow--left {
  &::after {
    content: "";
  }

  svg {
    grid-column: 1;
    justify-self: start;
  }

  @media (any-hover: hover) {
    &:hover svg {
      transform: translateX(-4px);
    }
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .button-icon-arrow {
    @media (any-hover: hover) {
      transition: none;

      svg {
        transition: none;
      }
    }
  }

  .button-icon-arrow--right,
  .button-icon-arrow--left {
    @media (any-hover: hover) {
      &:hover svg {
        transform: none;
      }
    }
  }
}

<a href="#" class="button-icon-arrow-hover-slide">
  テキスト
  <span class="button-icon-arrow-hover-slide__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24">
      <path
        d="M4 12H20M14 6L19.2929 11.2929C19.6834 11.6834 19.6834 12.3166 19.2929 12.7071L14 18"
      />
    </svg>
    <svg viewBox="0 0 24 24">
      <path
        d="M4 12H20M14 6L19.2929 11.2929C19.6834 11.6834 19.6834 12.3166 19.2929 12.7071L14 18"
      />
    </svg>
  </span>
</a>

/* reset */
:where(a, button).button-icon-arrow-hover-slide {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

:where(button).button-icon-arrow-hover-slide {
  vertical-align: middle;
  text-align: inherit;
}

/* snippet */
.button-icon-arrow-hover-slide {
  --button-background: #2b36f5;
  --button-background-hover: #1f28a8;
  --button-color: #fff;
  --button-focus-color: #2b36f5;
  --button-icon-size: 40px;
  --button-icon-background: #fff;
  --button-icon-color: #2b36f5;
  --button-duration: 0.4s;
  --button-easing: cubic-bezier(0.65, 0, 0.35, 1);

  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--button-color);
  background-color: var(--button-background);
  border-radius: calc(infinity * 1px);

  &::before {
    content: "";
  }

  @media (any-hover: hover) {
    transition: background-color var(--button-duration) var(--button-easing);

    &:hover {
      background-color: var(--button-background-hover);
    }
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--button-focus-color);
    outline-offset: 2px;
  }
}

.button-icon-arrow-hover-slide__icon {
  display: grid;
  grid-column: 3;
  justify-self: end;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  overflow: hidden;
  background-color: var(--button-icon-background);
  border-radius: 50%;

  svg {
    grid-area: 1 / 1;
    place-self: center;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--button-icon-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    @media (any-hover: hover) {
      transition: transform var(--button-duration) var(--button-easing);
    }
  }

  svg:last-child {
    transform: translateX(calc(var(--button-icon-size) * -1));
  }
}

@media (any-hover: hover) {
  .button-icon-arrow-hover-slide:hover
    .button-icon-arrow-hover-slide__icon
    svg:first-child {
    transform: translateX(var(--button-icon-size));
  }

  .button-icon-arrow-hover-slide:hover
    .button-icon-arrow-hover-slide__icon
    svg:last-child {
    transform: translateX(0);
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .button-icon-arrow-hover-slide {
    @media (any-hover: hover) {
      transition: none;
    }
  }

  .button-icon-arrow-hover-slide__icon svg {
    @media (any-hover: hover) {
      transition: none;
    }
  }

  @media (any-hover: hover) {
    .button-icon-arrow-hover-slide:hover
      .button-icon-arrow-hover-slide__icon
      svg:first-child {
      transform: none;
    }

    .button-icon-arrow-hover-slide:hover
      .button-icon-arrow-hover-slide__icon
      svg:last-child {
      transform: translateX(calc(var(--button-icon-size) * -1));
    }
  }
}

<a href="#" class="button-icon-square-arrow">
  外部リンク
  <span class="button-icon-square-arrow__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24">
      <path d="M7 17L17 7M17 7H11M17 7V13" />
    </svg>
  </span>
</a>

/* reset */
:where(a, button).button-icon-square-arrow {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

:where(button).button-icon-square-arrow {
  vertical-align: middle;
  text-align: inherit;
}

/* snippet */
.button-icon-square-arrow {
  --button-color: #3d4a5c;
  --button-color-hover: #2b36f5;
  --button-focus-color: #2b36f5;
  --button-icon-size: 32px;
  --button-icon-border: #c8c4bc;
  --button-icon-border-hover: #2b36f5;
  --button-icon-background-hover: #2b36f5;
  --button-icon-color-hover: #fff;
  --button-duration: 0.3s;
  --button-easing: ease;

  display: inline-flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--button-color);
  background-color: transparent;

  @media (any-hover: hover) {
    transition: color var(--button-duration) var(--button-easing);

    &:hover {
      color: var(--button-color-hover);
    }
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--button-focus-color);
    outline-offset: 2px;
    border-radius: 4px;
  }
}

.button-icon-square-arrow__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  border: 1px solid var(--button-icon-border);
  border-radius: 50%;

  @media (any-hover: hover) {
    transition:
      border-color var(--button-duration) var(--button-easing),
      background-color var(--button-duration) var(--button-easing),
      color var(--button-duration) var(--button-easing);
  }

  svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@media (any-hover: hover) {
  .button-icon-square-arrow:hover .button-icon-square-arrow__icon {
    color: var(--button-icon-color-hover);
    background-color: var(--button-icon-background-hover);
    border-color: var(--button-icon-border-hover);
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .button-icon-square-arrow {
    @media (any-hover: hover) {
      transition: none;
    }
  }

  .button-icon-square-arrow__icon {
    @media (any-hover: hover) {
      transition: none;
    }
  }
}