creatersnest

【CSS】美しいhover(ホバー)が印象的なボタンを作成しよう


現在、世の中はマテリアルデザインが主流になってきています。
その中で、いかにシンプルで、いかにわかりやすいビジュアルになっているか
というのが Web デザインで必要になっています。

今回は、その中で重要な要素となる、ホバーの美しいサイトをいくつか紹介していきます。

 

Google Design

Google Design

Google Design

やはり、さすが Google といったところですね。
王道の「Google Design」というページ。
ホバー時に項目下部に影ができ、オブジェクトが動き出すものもあります。

とってもシンプルですが、最も人間がわかりやすく、
自然に馴染むものがこの Google Design のページです。

 

Benoit Challand

benoitchalland

Benoit Challand

こちらの Web サイト、
全体的な動作に統一感があり、とても見やすくなっていますね。
ホバー時の動作は、写真を囲むように外枠が表示され、
「See more」の文字に下線が引かれて、さらに
写真上部に項目のプロジェクト名などが表示されています。

ちなみに、項目をクリックした時の動作も秀逸で、
ページが流れるように更新されます。
美しいですね。

 

美しいホバーは自分で作りだせ!

このまま綺麗なホバーを持っている Web サイトを紹介し続けても
自分で作れなければ意味がないので、
ここからはどうやってホバーを作り、進化させていくかを紹介します。

今回はとりあえず、ボタンにホバーエフェクトをかけていきましょう。

 

ホバー時にゆっくり背景が変わるボタンを作る

ボタン1 ボタン2

今回は上のスクリーンショットのようなボタンを実装していきたいと思います。

まず、HTML です。

今回は、すべてのデザインを CSS で行っていきます。
まず、何もしていない状態のボタンのデザインを行います。

基本的な内容ですので、説明は行わなくても大丈夫ですね。続いて、
ホバー時のデザインです。

大きさなどはホバー前と変わりませんので、
背景色や文字色などの変更のみを行いました。

最後に、肝となるホバーした時の動作を記述します。

マウスがボタンの上にホバーした時、
CSS 3 のアニメーション ( transition ) を使ってボタンにエフェクトをかけています。

 

 

まとめ

今回はとても簡単なデザインの実装でしたが、CSS を応用すれば、
様々な美しいホバーのデザインを行うことができます。

また、JavaScript も併用することで、もっとレベルの高い
デザインに仕上げることもできるでしょう。

様々な方法を利用して、自分の Web サイトの質を
向上させていきましょう!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Hello world! mlooking です!読み方は エムルッキング 。いろいろな情報を伝えられたらいいかなと思っています。

Next ArticleWebデザイナーに使ってほしいChromeの拡張機能15選