ポートフォリオの作り方をゼロから徹底解説

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

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

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

ホバーの基本

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

デモ

マウスオーバーしてみて

HTML

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

CSS

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

/* マウスオーバーした際の背景色 */
.btn_hover:hover {
background-color: #37beb0;
}
クリエイターへの就職・転職成功率を劇的に上げるエージェント5選
クリエイターへの就職・転職を目指すにはリクナビやen転職など、大手だけでは役不足です。
コチラの記事私が転職の際に活用し、複数内定を獲得したクリエイティブ系に強い転職エージェントを徹底解説!
フリーランス志望の方、収入を増やしたい方に必須のエージェントは コチラ で解説しています。

ふわっと切り替える

ホバー時にふわっとした動きを追加しました。
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;/*背景色*/
}

Web制作・プログラミングを学ぶ

さらにWEB制作やプログラミングについて学習したい方・転職を目指されている方は、エンジニア養成スクールやWebデザインスクールで集中的に学ぶと効率的かつ確実です。

独学だと初期段階でつまづき嫌になってしまう事も多々あります。
スクールだと現役のプロによる手厚いサポートで安心して最新のWeb開発について学ぶことができます。

下記で多くのスクールの中から講師の質・授業カリキュラムの質・転職成功率が高く、本当に受講する価値のあるスクールのみ厳選して紹介しておりますので是非ご覧ください。

おわりに

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

ではまた!