錠剤型リンクボタン

角が完全に丸められた錠剤型（タブレット型、ピル型）のリンクボタン

最終更新日:

概要

角が完全に丸められた錠剤型のリンクボタンです。

プレビュー

錠剤型ボタン文字量に応じて横幅が伸縮します

HTML

<a href="#" class="pillButton">錠剤型ボタン</a>

CSS

※CSS Nesting（SassではなくCSSのネスト）を使用しています。

@layer parts {

.pillButton {
  --_color-bg: oklch(0.55 0.18 250);
  --_color-text: oklch(1 0 0);
  --_color-shadow: oklch(0.55 0.18 250 / 0.2);

  --_transition-duration: .2s;

  display: inline-block;
  padding: .75em 1.5em;
  background-color: var(--_color-bg);
  color: var(--_color-text);
  text-decoration: none;
  border-radius: calc(infinity * 1px); /* 角丸を無限大の大きさにすることで、どんな大きさでも完全な角丸に。*/
  font-weight: 500;
  transition: color var(--_transition-duration) ease,
              background-color var(--_transition-duration) ease,
              border-color var(--_transition-duration) ease,
              transform var(--_transition-duration) ease;
  border: 2px solid var(--_color-bg);
  outline: 2px solid transparent; /* あらかじめ透明なアウトラインを指定しておかないと、focus時のアニメーションが不自然になる */
  outline-offset: 2px;

  @media (any-hover: hover) {
    &:hover {
      background-color: color-mix(in oklch, var(--_color-bg) 80%, black);
      transform: translateY(-1px);
      box-shadow: 0 4px 8px var(--_color-shadow);
    }
  }

  &:focus {
    outline: 2px solid var(--_color-bg);
  }

  &:active {
    transform: translateY(0);
  }
}

} /* end of @layer parts */

関連する知識・考え方