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

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

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

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

コードの紹介

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

HTML

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

CSS

表示はこちら

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

CSSの解説

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

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

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

動作動画

まとめ

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

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

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

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

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!