CSSで動くボタンを作る方法と疑似クラス「:focus-visible」【アニメーション】

今回はCSSの初心者を対象に、簡単なボタン（メール送信ボタンなど）を作る方法を解説します。

今回作るボタンの特徴は、以下の点です。

・マウスをボタンに乗せると背景と文字、そしてその形状も変化する
・ボタンを押したときに「クリック感（押し下げ感）」があるようにする
・ボタンの外枠を示す枠線（アウトライン）がない。ただし、キーボードのTabキーなどを使いキーボードによる操作で、ボタンにフォーカスを合わせたときだけ黄色の枠線（アウトライン）が表示される

まずは完成形を見てください。

Contents

1 今回作るボタン
2 HTMLコード
3 CSSコード
- 3.1 box-shadowプロパティで背景色を変える
- 3.2 ボタンのクリック感
4 （3）アクセシビリティ：「outline: none」と擬似クラス「foucs-visible」

今回作るボタン

完成させるボタンはこちらです。

See the Pen ボタンアニメーション01 by 1978works (@1978works) on CodePen.

まずはマウスでボタンを押して見てください。色・形状が変わるはずです。

またマウスをボタンにあわせたときも、それを押したときにも、ボタン周囲に枠線（アウトライン）が出ないと思います。

しかし、キーボードのTabキーでボタンにフォーカスをあわせると黄色の枠線が出てくると思います。ボタンの周辺の黒いエリアをマウスでクリックしてから、キーボードのTabキーを押して見てください。ボタンにフォーカスがあたり、黄色の枠線が出てくると思います。

（注意：現時点でこのような機能を実現するために使っている擬似クラス「:focus-visible」は、対応しているブラウザが限られているので、非対応のブラウザでは上手く動かないと思います）

HTMLコード

<button id="send" type="submit">メール送信ボタン</button>

今回は単なるボタンであって、通常の「<a href=””></a>」を使う「リンク」とは違うので注意してください。あくまでボタンです。

ボタンにはidとして「send」という名前をつけました。

次にCSSコードです。

CSSコード

今回適用するCSSは次のようになります。

/* (1) 背景色の設定とボタンの中央配置*/
body {
  background-color:#1D1E22;
  text-align:center; 
}

/* 非推奨
#send, #send:focus {
  outline: none !important;
}

 「半角スペース＋!importan」宣言を使うことで優先順位を最優先にすることができる
（idやclassで指定されたスタイルよりも優先される）

しかし、outline:noneは、マウスを使わずキーボードだけでWEBページを操作するときにユーザーフレンドリーとはならないので使わないほうがいい。見た目は良いが、アクセサビリティが損なわれる。以下の「focus-visible」を使うほうが良い。ただし一部の現代的なブラウザしか対応していない。

*/



/* (2) 初期のボタンの設定*/
#send{
    color:white;
    margin-top:100px;
    background:#33ccff;
    padding: 10px 40px;
	border: none;
    border-radius: 0px;
    display: inline-block;
    cursor: pointer;
    outline:none;
    box-shadow: inset 0 0 0 0 white;
	transition: all ease 0.5s;
}

/*(3) キーボードー操作によってフォーカスされたときだけ外枠が表示される*/

#send:focus-visible{
  transition:0s;
  outline:2px solid yellow;
}


/* (4) マウスが乗ったときの挙動を設定 */
#send:hover{
    border-radius:20px;
    box-shadow: inset 20em 0 white;
    color:#33ccff;
    transition:all ease 0.5s;
}

/* (5) ボタンが押されたときの挙動を設定 */
#send:active{
  position:relative;
  color:white;
  top:3px;
  box-shadow:inset 1px 1px 1px 1px black;
  transition:0s; 
  outline:none;
}

box-shadowプロパティで背景色を変える

ボタンの背景色が変わるという点については、いろいろやり方があって人によって違うでしょうが、今回はプロパティ「box-shadow:」をつかうことで実現しています。プロパティの詳細はMDN「box-shadow」をご覧ください。

名前の通り、「影」を実現するプロパティですが、今回はそれをボタン「要素の内側に影を落とす」ことで背景の色を変えることを実現しています。

/* (4) マウスが乗ったときの挙動を設定 */
#send:hover{
    border-radius:20px;
    box-shadow: inset 20em 0 white;
    color:#33ccff;
    transition:all ease 0.5s;
}

マウスが上にのったときに、この部分のbox-shadowプロパティの値が適用されます。

そしてtransitionプロパティで、その変化の仕方を定義しています。box-shadowとtransitioにおける、

inset
20em
0
white
all
ease
0.5s

などの各値をいろいろ変えてみて、どんなふうに変化が現れるのか楽しんでみてください。

ボタンのクリック感

ボタンを押した感を実現するために、今回は以下の2点を加えてみました。

ちょっとだけボタンが下に落ちる
内部の淵が少し暗くなる

/* (5) ボタンが押されたときの挙動を設定 */
#send:active{
  position:relative;
  color:white;
  top:3px;
  box-shadow:inset 1px 1px 1px 1px black;
  transition:0s; 
  outline:none;
}

上のコードで、

positionとtop→下に落ちることを定義
box-shadow→淵を暗くすること定義

となっています。

（3）アクセシビリティ：「outline: none」と擬似クラス「foucs-visible」

ある要素の輪郭線を消すためによく使われてきたのが、

outline:none;

によって枠線（アウトライン）を消すことです。しかし、CSS公式リファレンスによると、

outline の値を 0 または none にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。
MDN「outline アクセシビリティの考慮事項」

と記載されています。

ようするに、なにかの要素が選択されている（フォーカスが当たっている）状態だと目で見てわかるためには、その要素にフォーカスが当たっていますよというサインがあったほうがいいわけです。マウスによる操作であろうとキーボードによる操作であろうと。

ところが、「outline:none;」を使うと、全ての操作方法でそういったフォーカスしているとのサインが消えてしまうので、ユーザーを惑わせるものとしてあまりよろしくないということですね。

しかし、一方で作る側（WEB制作を発注する側も？）からすると、余計な輪郭は表示されないほうがデザイン的にすっきりするわけです。

そこで、こういったアイクセシビリティと見た目との妥協・調和を実現するため、

:focus-visible

という疑似クラスがCSSとして用意されました。

詳しくは、公式リファレンス「:focus-visible」を見てください。

この「:focus-visible」を使うと、キーボードで操作したときのみ枠線が表示されるという機能が実現できます。まさに今回はこれを利用しました。

なお上述のように全てのブラウザが対応しているわけではないので、対応していないブラウザについてはJavaScriptを使うポリフィルという手段により実現させることが必要となります。ただまぁ古いシステムを使い続ける場合を除けば、もう今のネットの利用環境を考えると非対応のブラウザを切り捨てるのもありでしょう。