マウスオーバーすると背景にブラーがかかるボタンをCSSだけで作ってみる

最近のCSSはjavascriptを使用せずにブラー（ぼかし）をかける事ができる様になりました。
マウスオーバーでボタンの背景がフワッとぼやけるとちょっとカッコイイなと思いましたので、そんなボタンを作ってみます。

1 作りたいボタンのイメージ
2 コードの紹介
3 CSSの解説
4 動作動画
5 まとめ
6 CSSコーディングのオススメ本

作りたいボタンのイメージ

作りたいボタンのイメージ。
マウスに載せた時のイメージはこんな感じのボタンを作ってみます。

コードの紹介

以下のHTMLとCSSコードを作成します。

HTML

<div class="container">
 <a href="#"><span>Button</span></a>
</div>

HTMLは特別変わった所はありませんが、タグの中のテキストはで囲ってください。

CSS

.container a{
 position: relative;
 width: 200px;
 height: 70px;
 display: inline-block;
 margin: 20px;
}

.container a:before,
.container a:after{
 content: "";
 position: absolute;
 inset:0;
 background: #4794bf;
 transition: 0.3s;
}

.container a:hover:before{
 filter: blur(10px);
}

.container a span{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 10;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.6em;
 letter-spacing: 2px;
 color: #fff;
}

表示はこちら

イメージ通りのボタンになりました。

CSSの解説

マウスオーバーした時にブラーを掛けているのは「filter: blur(10px);」です。

.container a:hover:before{
 filter: blur(10px);
}

beforeでもafterでも同じ様にブラーがかかりますが、beforeとafter両方にブラーをかけてしまうと、ボタン全体がぼやけてしまうので注意してください。
ピクセルサイズを変更する事で、ブラーがかかる範囲を変える事ができます。

その他、ボタンの作り方の説明はこちらのページをご参照ください。

動作動画

まとめ

ブラーの効果はスタイリッシュなデザインにはよく使いそうですね。
filterを設定するだけなので簡単な分、1つのページの至る所に使用して乱雑になるのも注意したいですね。あっちもこっちもブラーだと目が疲れそう。。。

CSSコーディングのオススメ本

CSS辞典第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。