【コピペでOK】マウスホバーで→が動くCSS！
記事IT・テクノロジー
「詳細はこちら→」などというリンクがあって、マウスをのせると矢印だけがひょこっと動くボタン見たことありますでしょうか？
これも意外と簡単に出来ますので、ご紹介いたします🎵
完成見本
↓
マウスを乗せると色が少し薄くなり、→だけヒョコッと右に動く。
html1️⃣（Google Fontsアイコン使用）
完成見本では、矢印にGoogle Fontsのアイコンを使用しています。
同じようにGoogle Fontsのアイコンを使用したい場合は、headタグ内に下記のようなコードを書きます。（普通の矢印を使うタイプも下記でご紹介します。）
▼headタグ内
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,700,0,0" />
そしてbodyタグ内には下記のようなコードを書きます。
▼bodyタグ内
<a href="fonts.google.com" class="btn01">詳細はこちら<span class="material-symbols-rounded arrow-right"> arrow_right_alt </span></a>
⭐️クリックした先のURLはaタグのhref内に入れます。
CSS1️⃣
<style>
.btn01 {
border-radius: 5px;
background: purple;
display: inline-flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: #fff;
padding: 1rem 2rem;
}
.btn01 .arrow-right {
transition: 0.2s ease-in-out;
}
.btn01:hover {
opacity: 0.8;
}
.btn01:hover .arrow-right {
transform: translateX(5px);
}
</style>
▼htmlファイルはこんな感じになりました。
html2️⃣（普通の矢印使用）
▼bodyタグ内
<a href="fonts.google.com" class="btn01">詳細はこちら<span class="arrow-right">→</span></a>
CSS2️⃣
▼基本的には1️⃣と同じなのですが、→が文字にくっついていたので、少し余白を足しました。変更点は下記。
.btn01 .arrow-right {
padding-left: 5px;
transition: 0.2s ease-in-out;
}
▼2️⃣のhtmlファイルはこんな感じになりました。
▼1️⃣と2️⃣完成見本を比較
いかがでしたか？今回は以上になります。
今後も、このようなWeb制作 のためのちょっとしたお役立ち情報をお届けして参りますのでまた見に来てもらえたら嬉しいです⭐️
▼Google Fontsのアイコンの使い方についてはこちら
