CSSでボタンホバー時にスタイルを変化させる方法3選

@ハクト 2023-06-22 11:34:40に投稿

今回の記事では、初心者の方でも簡単に学べる、CSSを活用した基本的なボタンホバーエフェクトについてご紹介します。

ホバーエフェクトとは、「:hover」疑似クラスを使用し、マウスカーソルが要素の上にあるときにその要素のスタイルを変化させる効果のことです。

この記事では、実際にどのようにホバーエフェクトを実装できるのか、その手順を紹介します。

境界線を入れる

「border」でピンクの実線を入れ、hover時に「background-color」で塗りつぶしています

<a href="" class="btn-solid">CSSボタン</a>

 

.btn-solid {
    padding: 1rem;
    border-radius: 5px;
    border: 2px solid #f1aeca;
    color: #f1aeca;
    text-decoration: none;
}

.btn-solid:hover{
    background-color: #f1aeca;
    color: white;
}

ホバー時、テキストにぼかしを入れる

「background-color」で塗りつぶしたシンプルなフラットボタン。hover時に「text-shadow」でテキストをぼかしを入れてます。

<a href="" class="btn-hover-blur">CSSボタン</a>

 

.btn-hover-blur {
    padding: 1rem;
    border-radius: 5px;
    background-color: #66b2d6;
    color: white;
    text-decoration: none;
}

.btn-hover-blur:hover {
    color: white;
    text-shadow: 0 0 5px;
}

ホバー時、二重線を入れる

「background-color」で塗りつぶし、hover時に「border: 10px double;」で二重線を入れてます。

<a href="" class="btn-hover-double">CSSボタン</a>

 

.btn-hover-double {
    padding: 1rem;
    border-radius: 5px;
    background-color: #5FC8BC;
    color: white;
    text-decoration: none;
}

.btn-hover-double:hover {
    border: 10px double;
    color: white;
}

PR

在宅ワークで稼げるスキルを身につける テックアカデミーWeb制作講座
動画編集入門プラン（2ヶ月）用LP
css ボタン ホバーエフェクト
B!

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter