【web】マウスオーバーアイディア

2024年8月11日 18:53

こんにちは、つちだにんじんです。
今回はリンクボタンのマウスオーバーでの変化の自分なりのアイディアをいくつか書こうと思います。

一般的によく使われるのは、マウスオーバーで透明度を上げる変化ですよね。

a:hover{
 opacity: 0.8;
}

の一文だけで済んでしまいますし・・・（怠惰）

でもでっかくなら、マウスオーバーでの変化でwebサイトを楽しくさせたいですよね！
ということで、いくつか私のマウスオーバーアイディアです！

色を変える

まずは定番である色を変化させるホバーアニメーションです。

下記でコードをそれぞれ表記しています。

色の反転

マウスオーバーで背景色と文字色の反転をさせています。
難しいことではないですが、これだけでもリンクボタンであることがわかりやすいですね。

<!---色の反転-->
<a class="color_1" href="">
  <div>リンクボタン</div>
  <div class="icon"></div>
</a>

/* css */

/*============
/*　色の反転
/*===========*/
.color_1{
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 10px 40px;
  background: #ddf95f;
  width: fit-content;
  color: #1f03a3;
  border-radius: 100vh;
  border: 2px solid #1f03a3;
}
.color_1 .icon{
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #1f03a3;
  border-right: 2px solid #1f03a3;
    margin-left: 20px;
  transform: rotate(-45deg)
}
/*マウスオーバー*/
.color_1:hover{
  background: #1f03a3;
  color: #ddf95f;
}
.color_1:hover .icon{
  border-bottom: 2px solid #ddf95f;
  border-right: 2px solid #ddf95f;
}

背景色を抜く

マウスオーバーで背景色を白く抜き、線のみ残すものです。

<!---背景色を抜く-->
<a class="color_2" href="">
  <div>リンクボタン</div>
  <div class="icon"></div>
</a>

/*============
/*　背景色を抜く
/*===========*/
.color_2{
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 10px 40px;
  background: #67568c;
  width: fit-content;
  color: #fff;
  border-radius: 100vh;
  border: 2px solid #1f03a3;
}
.color_2 .icon{
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-left: 20px;
  transform: rotate(-45deg)
}
/*マウスオーバー*/
.color_2:hover{
  background: #fff;
  color: #1f03a3;
}
.color_2:hover .icon{
  border-bottom: 2px solid #1f03a3;
  border-right: 2px solid #1f03a3;
}

ゆっくり色が変化

「transition: .2s;」を記述することで、変化がゆっくりになるようにしています。

<!---ゆっくり変化-->
<a class="color_3" href="">
  <div>リンクボタン</div>
  <div class="icon"></div>
</a>

/*============
/*　ゆっくり変化
/*===========*/
.color_3{
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 10px 40px;
  background: #ff6e6c;
  width: fit-content;
  color: #1f1235;
  border-radius: 100vh;
  border: 2px solid #1f1235;
  transition: .2s;
}
.color_3 .icon{
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #1f1235;
  border-right: 2px solid #1f1235;
  margin-left: 20px;
  transform: rotate(-45deg)
}
/*マウスオーバー*/
.color_3:hover{
  background: #fff;
  color: #ff6e6c;
  border: 2px solid #ff6e6c;
}
.color_3:hover .icon{
  border-bottom: 2px solid #ff6e6c;
  border-right: 2px solid #ff6e6c;
}

矢印を動かす

次は、マウスオーバーで矢印の部分のアイコンが動くものです。

横にずれる

マウスオーバーで矢印が横にずれます。
割と定番です。

<!--- 横にずれる -->
<a class="yoko" href="">
  <div>リンクボタン</div>
  <div class="icon"></div>
</a>

/* =================
/* 横にずれる
/* ==============*/
.yoko{
  display: flex;
  align-items: center;
  background: #F0CB35;
  width: fit-content;
  border-radius: 10vh;
  padding: 1% 3%;
  color: #C02425;
  text-decoration: none;
  border: 2px solid #F0CB35;
}
.yoko .icon{
  width: 10px;
  height: 10px;
  border-bottom: solid 2px #C02425;
  border-right: solid 2px #C02425;
  margin-left: 20px;
  transform: rotate(-45deg);
  transition: .2s;
}
/* マウスオーバー */
.yoko:hover{
  background: #fff;
}
.yoko:hover .icon{
  transform: rotate(-45deg) translate(10px, 10px);
}

動きはtransformでつけています。

回る

こちらはアイコンが360度まわります。
あまり見ないタイプ、個性的です。

<!--- 回るアイコン -->
<a class="spin" href="">
  <div>リンクボタン</div>
  <div class="icon"></div>
</a>

/* =================
/* 回るアイコン
/* ==============*/
.spin{
  display: flex;
  align-items: center;
  background: #F1F2B5;
  width: fit-content;
  border-radius: 10vh;
  padding: 1% 3%;
  color: #135058;
  text-decoration: none;
  border: 2px solid #135058;
}
.spin .icon{
  width: 15px;
  height: 15px;
  background: #135058;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  margin-left: 20px;
  transition: .7s;
}
/* マウスオーバー */
.spin:hover{
  background: #135058;
  color: #F1F2B5;
}
.spin:hover .icon{
  background: #F1F2B5;
  transform: rotate(360deg);
}

大きくなる

マウスオーバーでボタンが大きくなります。

<a href="">リンクボタン</a>

a{
  display: block;
  width: fit-content;
  text-decoration: none;
  background: #FEAC5E;
  border-radius: 10vh;
  padding: 1% 4%;
  color: #6b8e23;
  margin: 2%;
  transition: .2s;
}
/* マウスオーバー */
a:hover{
  transform: scale(1.2);
}

前回のアニメーションアイディアをボタンに応用した感じですね。
ぜひ、楽しいリンクボタンを作ってください。

アニメーションアイディアについて↓

私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！