ボタンにアイコンを添えるだけで、クリックしてほしいという意図が伝わりやすくなります。「続きを読む →」「お申し込みはこちら ▶」のように、矢印ひとつ置くだけでユーザーの視線を誘導できる。さらにそのアイコンが動くとなれば、注目度は段違いです。
この記事では、CSSだけで実装できるアイコン付きボタンを5種類紹介します。JavaScriptは一切使いません。すべてHTMLとCSSのコピペだけで動作し、WordPress/SWELLでも問題なく使えます。矢印・アイコンの見せ方・動き方のバリエーションを揃えましたので、サイトのテイストに合わせて選んでみてください。
Arrow Slide（アロー・スライド）
ホバーした瞬間に「→」がスッと現れる、ミニマルで洗練されたアニメーションです。普段は矢印が隠れていて、ボタンのテキストだけが見えている。カーソルを乗せたときに初めて矢印が右からスライドして登場するので、「動く前/後」のギャップが気持ちいい演出になります。
ポートフォリオの「Works →」「About →」「Contact →」のような、リンクに近い感覚のナビゲーションボタンに特に映えます。コーポレートサイト・シンプルな個人ブログのCTAとしても使いやすく、5本の中で最も汎用性が高い1本です。
See the Pen Arrow Slide by BaseKENT (@basekent) on CodePen.
調整方法
- ボタンの色:
background: #111をブランドカラーに変更してください。テキスト色color: #fffとのコントラストも合わせて確認を。 - 矢印の位置:
right: 16pxの数値を調整すると矢印が左右にずれます。ボタンのサイズに合わせて微調整してください。 - アニメーション速度:
transition: padding-right 0.35sの秒数を小さくするとキビキビした動きに、大きくすると優雅な動きになります。
Icon Reveal（アイコン・リビール）
ホバーしたとき、テキストの左側に小さな星(✦)がくるりと回転しながら現れます。それと同時にボタン自体が透明からソリッドの塗りに変化するので、アイコンの登場と配色変化が重なり、インタラクションとして満足感のある仕上がりになっています。
ゴーストボタン（透明+枠線）から始まり、ホバーで塗りに変わる動きは視覚的なON/OFFがはっきりしていて使いやすい。「Get Started」「Sign Up」など、アクションを促す一押しのボタンとして機能します。フォームのサブミットボタンや、サービス紹介ページのCTAにどうぞ。
See the Pen Icon Reveal by BaseKENT (@basekent) on CodePen.
調整方法
- アイコンの変更:
content: '✦'を'★''▶''✉'など任意のUnicode文字に変えられます。絵文字も指定可能です。 - 枠線の色:
border: 2px solid #333の色・太さを変更してください。ブランドカラーに揃えるとサイトに馴染みます。 - アニメーション時間:
transition: padding-left 0.3s easeの秒数を変更するとアイコンの登場速度が変わります。0.2sにするとキレのある動きになります。
Arrow Bounce（アロー・バウンス）
矢印がぴょんぴょんと横に跳ねる、愛嬌のある演出です。ホバーすると「→」が右に向かって0.6秒ごとに繰り返しバウンスし続けます。「もっと先に進んでください」と背中を押しているようなUIで、圧迫感なく次の行動を促す効果があります。
丸みのある border-radius: 50px のピル型ボタンとの相性が特に良く、柔らかいUIデザインに自然と馴染みます。カジュアルな個人ブログ・レシピサイト・SNS連携ボタンなど、堅さより親しみやすさを優先したいシーンで使ってみてください。
See the Pen Arrow Bounce by BaseKENT (@basekent) on CodePen.
調整方法
- 跳ね幅:
@keyframes内のtranslateX(6px)の数値を大きくすると矢印がより遠くまで飛びます。3px程度にすると控えめな動きになります。 - ボタンの色:
background: #ff6b35を好みのカラーに変更してください。オレンジ系は視認性が高くCTAに向いていますが、ブランドカラーへの変更も自由です。 - バウンス速度:
animation: bounce 0.6s ease infiniteの0.6sを短くするとリズムが速くなり、長くするとゆっくりとした動きになります。
Icon Spin（アイコン・スピン）
ホバーした瞬間に、歯車アイコン(⚙)がくるりと1回転するボタンです。animation: spin forwards なので回転は1回だけ——繰り返しぐるぐる回るのではなく、一度だけ「パッと動いてピタッと止まる」ところが上品です。
ダーク系の背景色と組み合わせた設定・ツール系ボタンに特に効果的です。「Settings」「Configure」「Options」のような、機能へのアクセスボタンに使うと、アイコンの意味とアニメーションの動きがぴったり合って、インターフェースとしての完成度が上がります。ポートフォリオの「使用ツール」「制作環境」ページにも合いそうです。
See the Pen Icon Spin by BaseKENT (@basekent) on CodePen.
調整方法
- アイコンの変更:
content: '⚙'を'✉'（メール）、'▶'（再生）、'↻'（リフレッシュ）などに変えることでサイトの用途に合わせられます。 - 回転速度:
animation: spin 0.6s linear forwardsの0.6sを変更します。0.3sにすると素早く、1sにするとゆっくり1回転します。 - ボタンカラー:
background: #e94560を変更してください。背景色#1a1a2eとの組み合わせが決まっているので、セットで調整するとバランスが保てます。
Dual Slide（デュアル・スライド）
左右両側からアイコンが同時に中央へ向かってスライドしてくる、ゴージャスな演出のボタンです。ホバーすると左右それぞれに「↓」が出てきて、ボタンが両側に広がりながらアイコンを受け取るような動きをします。対称の動きを組み合わせることで、視覚的なインパクトが倍増します。
「Download」「Subscribe」「Join Now」など、決定的なアクションを求めるCTAボタンに向いています。左右対称の動きは「しっかりつかむ」「確実に受け取る」というイメージに重なり、信頼感を演出します。ランディングページのメインCTA・申し込みページの最下部ボタンに特におすすめです。
See the Pen Dual Slide by BaseKENT (@basekent) on CodePen.
調整方法
- アイコンの変更:
::beforeと::afterそれぞれのcontent: '↓'を同じ文字・異なる文字に変更できます。左を'◀'、右を'▶'にして横向きに統一するのもかっこいいです。 - スライド量:
transform: translateX(-6px)とtranslateX(6px)の数値を大きくすると、アイコンがより遠くから飛んでくる演出になります。 - ボタン幅の広がり: ホバー時の
padding: 14px 48pxの左右padding値を調整してアイコン出現後の余白量を変えられます。狭すぎるとアイコンが文字に重なるので44px以上を目安にしてください。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
