アイコンボタンCSSスタイリングガイド

This is the tenth post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer. Visit ModernCSS.dev to view the whole series and additional resources.

このガイドは、前のエピソードで構築されます"CSS Button Styling Guide" アイコンボタンのユースケースを探索する.私たちはアイコン+テキストだけでなく、アイコンのみのボタンをカバーします.

Note: With SVG now having excellent support, the preferred practice is to use it for icon systems vs. icon fonts. We will not dive into SVGs specifically, but we will assume SVG icons are in use.

アイコン+テキストボタン

まず、現在のボタンから簡単に拡張し、テキストの横にあるSVGアイコンをドロップします.

<a href="javascript:;" class="button">
  <svg class="button__icon" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 32 32" aria-hidden="true" focusable="false">
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </svg>
  Button Link
</a>

アイコン+テキストユースケースのSVGには3つの主要な機能があります.

新しい使用button__icon クラス

The viewBox 値は、アイコンの境界に理想的には、値が分散している場合でも、アイコンを横切って最良の結果のための正方形にタイトです.24 対32 )

アクセシビリティのために、

aria-hidden="true" - それは装飾的であり、目に見えるボタンのテキストで既に提供されていない任意の意味の値を提供していないので

focusable="false" - IEのいくつかのバージョンで「ダブルフォーカス」イベントを防ぎます

For more on accessibility of icon buttons: Read this excellent article by Sara Soueidan who is an expert on both accessibility and SVGs

アイコンスタイルのアイコン

のためdisplay: inline-flex ベースに適用.button , とwidth SVGの属性.デフォルトではアイコンはまだ表示されていない.
だからまず最初に我々の新しい.button__icon 使用するクラスem ユニットは、font-size 使用中:

.button__icon {
  // You may wish to have your icons appear larger
  // or smaller in relation to the text
  width: 0.9em;
  height: 0.9em;
}

によるとthe spec default , SVG部品path を持っているfill 黒のこれを調整するには、特別なキーワードを使用しますcurrentColor ボタンの適用テキストを拡張するcolor SVGへ:

.button__icon {
  // ...existing styles
  fill: currentColor;
}

調整する最後のものは、アイコンとボタンのテキストの間に空白のビットを追加することですem 単位

.button__icon {
  // ...existing styles
  margin-right: 0.5em;
}

私たちは、アイコンがテキストの後に置かれるのを許容するために1つのユーティリティクラスを加える必要があるか、ボタンの「終わり」(左から左への言語のための)で.我々は既存のマージンをゼロにし、左に反転させます.

.button__icon {
  // ... existing styles

  &--end {
    margin-right: 0;
    margin-left: 0.5em;
  }
}

<a href="javascript:;" class="button">
  Button Link
  <svg class="button__icon button__icon--end" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 32 32" aria-hidden="true" focusable="false">
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </svg>
</a>

アイコンのみボタン

我々は、アイコンだけのボタンに加えて、両方の通常のボタン(アイコンの有無にかかわらず)が欲しいという仮定をするつもりです.これは重要です.なぜなら、私たちは.button 新しいクラスに加えてクラスを再定義し、ベースのビジュアルスタイルを再定義する必要はありません.オーバーライドは最小限です.

<a href="javascript:;" class="button icon-button" aria-label="Icon-only Button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" 
aria-hidden="true" class="icon-button__icon" aria-hidden="true" focusable="false">
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </svg>
</a>

アイコン+テキストボタンからの変更:

の追加icon-button クラスへのa

追加aria-label="Icon-only Button" Visualテキストを削除したので、アクセス可能なテキストの代替を提供します

SVGのクラスのスワップicon-button__icon

Important: the value of the aria-label should describe what the button does not what the icon is. For further reading and other ways to provide a text alternative, see Sara Soueidan's article

私たちが調整の前に何を得るかは-空の見えないボタンです.

まず、新しいクラスを作りましょう.そのため、この規則は.button ルール

.icon-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: 0.35em;

  &__icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
}

新しい定義width and height それは完全にあなたのデザイン要件に基づいて調整可能ですが、それは正方形に一致する必要があります.これにより、“円”の出現をborder-radius: 50% 適用される.
それから、我々はパッド(もう一度あなたの好み/デザイン要件に)のタッチを加えて、SVGアイコンとボタン境界の間に若干の呼吸室を加えます.
次に、我々の定義icon-button__icon クラス.ここでの違いはwidth and height コンテナーのそれにマッチするために100% . これは、複数のサイズのアイコンのみのボタンにfont-size プロパティ.icon-button クラス.
進捗状況:

それは我々が望むものでありません、しかし、我々は以下の特性を調節することによってそれを修正することができます.button クラス.私たちは:not() セレクタ通常のボタンだけを意味するプロパティを除外します.

.button {
  // ...existing styles

  // Find these styles and update, not duplicate:
  &:not(.icon-button) {
    padding: 0.25em 0.75em;
    min-width: 10ch;
    min-height: 44px;
  }
}

今、我々は後に何をしているか

デモ

の使用を含みます.button--small 前のエピソードで作成されたクラスだけでなく、“本当のボタン”は、そのスタイルが両方の要素に対して同様に機能することを検証します

Try out ButtonBuddy to create accessible button colors. This web app I created will help get all the vectors of contrast right across your button color palette.