今回は、マウスを乗せた時に矢印が伸びるボタンの作り方をご紹介いたします。

この記事を読んでできること

・コピペするだけでマウスオーバーした矢印の形を変えることができる

よく使うパターン

マウスオーバー時に色を変化させる場合、以下の3パターンがよく使われますので
使いたいパターンがどれか確認してみましょう。

それでは順に紹介していきます。

①三角矢印が動く

完成品を見てみましょう。

ホバー時に矢印が右側に動いていますね。

これは、position > rightの数値をホバー時に変えることで実現できます。
「right」を20～10pxと設定すると動くように見せる事ができます。

また、矢印の作り方が分からない方は「transform: rotate(-135deg);」を消してみると分かりやすいと思います。

以下が2点がポイントです。

②片側矢印が動く

こちらは片側矢印の場合です。

①とほぼ同じですが、hover時に「width」の長さを指定することで
矢印が伸びたように見せる事ができます。

➂両側矢印が動く

こちらが両側矢印がニョキッと動くように見えるパターンです。

この矢印は2つの文字を組み合わせています。

それぞれが独立している為、hover時に両方とも指定することを忘れないようにしましょう。

まとめ

コピペするだけで、簡単に矢印を動かすことができました。

この内容を理解すれば、マウスオーバー時の動きやCSSだけで矢印を作ったりすることができると思いますのでご活用ください。

hoverの指定方法や画像デザインをオシャレにする方法なども別途、下記で紹介しております。あわせてご活用いただければ幸いですm(__)m

hover時にボタンや画像を半透明にする方法