CSSボタンデザイン実装集【ホバー・光る演出・丸型】

CSSボタンは見た目より状態設計が大切

以前dipcode.netで公開していた「よく使うボタンの形」「キラッと光るボタン」「hoverボタンスタイル」の3記事を、現在の実装方法に合わせて一本へ統合しました。

ボタンは通常・ホバー・フォーカス・押下・無効の状態が判別できることが重要です。装飾だけでなく、キーボード操作時の可読性も確保します。

基本となる丸型ボタン

リンクならa要素、処理を実行するならbutton要素を使います。見た目の都合で要素の役割を変えないことが基本です。

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding-inline: 1.5rem;
  border: 2px solid #111;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s, color .2s, transform .2s;
}
.button:hover { background: #fff; color: #111; }
.button:focus-visible { outline: 3px solid #3d8bff; outline-offset: 3px; }
.button:active { transform: translateY(1px); }

光が走るボタン

疑似要素をボタンの外から移動させると、JavaScriptなしで光の演出を作れます。overflowを指定し、装飾要素がクリックを邪魔しないようpointer-eventsを無効にします。

.button--shine { position: relative; overflow: hidden; }
.button--shine::after {
  content: "";
  position: absolute;
  inset-block: -40%;
  inline-size: 35%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .7), transparent);
  transform: translateX(-250%) rotate(20deg);
  pointer-events: none;
}
.button--shine:hover::after { animation: shine .65s ease; }
@keyframes shine { to { transform: translateX(450%) rotate(20deg); } }
@media (prefers-reduced-motion: reduce) {
  .button, .button--shine::after { transition: none; animation: none; }
}

よくある失敗

演出は短く、操作結果が分かることを優先します。派手さよりも押せること、フォーカスされていること、無効であることが伝わる設計が先です。

• hoverだけに情報を持たせ、タッチ端末やキーボード操作を考慮しない
• 背景色だけ変えて文字色を変えず、コントラストが不足する
• a要素とbutton要素を役割ではなく見た目で選ぶ
• 常時アニメーションさせ、利用者のモーション軽減設定を無視する

参考資料

• MDN: :focus-visible
• MDN: prefers-reduced-motion