UIライブラリを使わずに「手早く」ボタンをデザインする

はじめに

今回はハッカソンなど、「細かいことは気にせずとにかく実装する」ような場合に手早くボタンを実装するケースについて取り上げようと思います。ハッカソンではアクセサビリティやセマンティックHTMLなどについて求められることはほぼ無いでしょう。しかし、あまりにダサいデザインにはしたくありません。そんな時の実装です

細かいことは気にしません

まずはデフォルトのボタンを作る

私は<button>ではなく<div>を使うことが多いです。buttonはブラウザごとに独自デザインが適用されており、狙ったスタイルを適用するにはそれらのデザインをリセットする必要があります。「手早く」実装する上では一々リセットするコードを調べるのも面倒なのでdivで代用します。

申し訳程度にrole="button"を追加しておきます。

<div role="button" class="submit-button">
	送信
</div>

続いてCSSです。今回は以下のようなデザインのボタンを作成します。

.submit-button {
  padding: 0.5rem 2em;
  border-radius: 3px;
  background: rgb(131, 78, 78);
  color: white;
}

padding

divで囲っただけでは余白がなくクリックし辛いデザインになってしまいます。paddingを指定してクリック領域を増やします

border-radius

直角長方形は硬い印象があるので丸みをつけてやります。border-radiusを大きくするとポップな印象に、今回のように3px程度に抑えるとスタイリッシュな印象になります。

background

背景色を指定し、クリック領域を視覚的に認識できるようにします。ボタンの背景色と地の背景色を同じにしたい場合は代わりにborderを指定します

cursor: pointer;

忘れがちです。 この記述はカーソルがボタンの上に来た場合、カーソルの形をpointerに変えるためのものです。pointerは、人差し指で指すあの形です。カーソルがpointerに変化することでユーザーはそこがクリック可能な領域だと認識できます。

お気持ち程度のアニメーション

前章のデザインだけでもボタンとしては十分ですが、これに加えてアニメーションを追加します。

アニメーションは不要では？と思うかもしれませんが、特にハッカソンでは重要な要素だと考えています（詳しくは後で説明します）

とは言っても凝ったアニメーションをつけるわけではなく、①ホバー ②クリック した時に簡単なリアクションを行うものです。どんなアプリケーションでも、ユーザーへのフィードバックは重要な要素です。フィードバックがあることで、ユーザーは「ここはクリックできそうだ」「今クリックできたな」と認識することができます。

ホバー

ホバー時のフィードバックは、前章で指定したcursor: pointer;で実装済みですが、追加で以下のようなアニメーションを追加しましょう。

.submit-button {
  padding: 0.5rem 2em;
  border-radius: 3px;
  background: rgb(131, 78, 78);
  color: white;
  cursor: pointer;
  transition: all 0.3s; /* NEW */
}

/* NEW */
.submit-button:hover {
  background: rgb(100, 61, 61);
}

:hover

:hoverでホバー時のスタイルを定義できます。今回は背景色を元の色より濃い茶色に変化させます。

transition

アニメーションを指定します。transitionを指定することで、今回は0.3sかけて背景色が変化するようになります。アニメーションを追加してやることで柔らかい印象になります。（アニメーションの長さは0.3sくらいがオススメです）

:active

次に:activeを定義します。:activeは実際にボタンをクリックしている間に適応されるスタイルです。:activeを指定することで「そのボタンをクリックした」ことをユーザーに伝えることができます。

今回は以下のようにクリックすると収縮するようなアニメーションを追加します。

とは言っても追加の実装は3行です。

submit-button {
  padding: 0.5rem 2em;
  border-radius: 3px;
  background: rgb(131, 78, 78);
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-button:hover {
  background: rgb(100, 61, 61);
}

/* New */
.submit-button:active {
  transform: scale(0.95);
}

tansform

transformを指定することで要素を変形させることができます。今回はscale(0.95)を指定し、サイズを0.95倍させます。

アニメーションは前章でtransition: all ...を指定しているので、アニメーションはtransformにも適用されます。

余談ですがtransformはアニメーションと相性が良いです。transformとtransition（名前が似ていますが、前者は要素の変形、後者はアニメーションの適用です）を同時に使うことで、要素を拡大・回転・移動させるアニメーションを簡単に作ることができます。

実装完了

以上で実装は終わりです。cssとしては20行にも満たないコードで使いやすいボタンを実装することができました。「手早く」実装できたと言えるでしょう。最終的なコードは以下です。