fantiaはじめました!無料素材やAI、PSDを配布中です。

【JS不要、コピペで1分】CSSだけで作るマウスオーバーでふわっと色が変わるボタン

この記事を読むのに必要な時間は約 9 分です。

カーソルを合わせると色がふわっと変わるボタンのソースです。
HTMLとCSSだけ、JSは使いません。
コピペして活用いただけます!

ソース(ホバーの基本)

hover(ホバー)の基本です。
デザインを施していない素のボタンです。

デモ

マウスオーバーしてみて

HTML

<div class="btn_hover">マウスオーバーしてみて</div>

CSS

/* 何もしていない時の背景色 */
.btn_hover {
background-color: #ee6354;
}

/* マウスオーバーした際の背景色 */
.btn_hover:hover {
background-color: #37beb0;
}

ソース(ふわっと切り替える)

ホバー時にふわっとした動きを追加しました。
transition: all 〇〇s ease;
コレ、よく使います。

デモ

マウスオーバーしてみて

HTML

<div class="btn_hover2">マウスオーバーしてみて</div>

CSS

/* 何もしていない時の背景 */
.btn_hover2 {
background-color: #ee6354;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}

/* マウスオーバーした際の背景 */
.btn_hover:hover2 {
background-color :#37beb0;
}

ソース(ボタンっぽくデザイン)

さらにボタンっぽくデザインしました。
お好みで色や角丸の形状等を変えてください。

デモ

マウスオーバーしてみて

HTML

<div class="btn_hover3">マウスオーバーしてみて</div>

CSS

/* 何もしていない時の背景 */
.btn_hover3 {
background-color: #ee6354;/*背景色*/
-webkit-transition: all 0.3s ease;/*ふわっとさせる間隔 Google Chrome、Safari*/
-moz-transition: all 0.3s ease;/*ふわっとさせる間隔 Firefox*/
-ms-transition: all 0.3s ease;/*ふわっとさせる間隔 IE*/
-o-transition: all 0.3s ease;/*ふわっとさせる間隔 Opera*/
transition: all  0.3s ease;/*ふわっとさせる間隔*/
padding:10px 0;/*文字と背景の余白*/
width: 220px;/*ボタン幅*/
color: #fff;/*文字の色*/
text-align: center;/*文字を揃える位置*/
border-radius: 3px;/*背景の角丸半径*/
cursor: pointer;/*ホバー時にカーソルの形状をポインターに*/
}

/* マウスオーバーした際の背景 */
.btn_hover3:hover {
background-color :#37beb0;/*背景色*/
}

HTMLとCSSを効率的に学ぶには

独学にオススメの書籍

HTMLとCSSを効率的に学習して自在にデザイン・レイアウトができるようになるとWEB制作の幅が一気に広がります。
下記は独学で学習するのにうってつけの良書なので要チェックです!

集中的に学習して本業としてのWEBデザイナーを視野に入れるなら

さらにWEBについて学習したい方、転職を目指されている方はWebデザインスクールで集中的に学ぶ事を視野に入れてみるのは如何でしょうか?現役プロのWEBデザイナーにより手厚いサポートがあるので、安心して最新のWeb開発について学ぶことができます。
まずは説明会や無料カウンセリングで情報を集めて検討してみてはいかがでしょうか?

おわりに

以上、ホバーでふわっと切り替えるボタンでした。
コピペすると1分で使えますのでサイト制作に役立ててください。

ではまた!