Arrow Slide Button

CODE

HTML

<div class="demo-stage"><button class="as-btn"><span class="as-text">GET STARTED</span><span class="as-arrow">→</span></button></div>

CSS

.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.as-btn { display:inline-flex; align-items:center; gap:.9rem; padding:1.1rem 2.6rem; background:#E91B89; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.2em; font-size:1rem; cursor:pointer; border-radius:6px; overflow:hidden; }
.as-text { transition:transform .35s cubic-bezier(.4,0,.2,1); }
.as-arrow { font-size:1.2rem; transition:transform .35s cubic-bezier(.4,0,.2,1); }
.as-btn:hover .as-text { transform:translateX(-7px); }
.as-btn:hover .as-arrow { transform:translateX(9px); }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .as-text,
  .as-arrow {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

CTAボタンにホバーでテキストと矢印が逆方向へ動く効果を作って。inline-flex+gap、テキストはtranslateX(-7px)、矢印（→）はtranslateX(9px)へ.35s cubic-bezierで遷移。overflow:hiddenで枠内に収める。前進・誘導感を演出する。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

矢印スライドボタン（Arrow Slide Button）とは

ホバー時にテキストと矢印が逆方向にスライドして前進感を出すCTAボタン。LP・申込ボタンに最適。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

CTAボタン・フォーム送信ボタン・申し込みボタンなど、クリックを促したい箇所のアクセントに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。

FAQ

矢印スライドボタン（Arrow Slide Button）はどんな効果ですか？

ホバー時にテキストと矢印が逆方向にスライドして前進感を出すCTAボタン。LP・申込ボタンに最適。CTAボタン・フォーム送信ボタン・申し込みボタンなど、クリックを促したい箇所のアクセントに向く演出です。

Arrow Slide ButtonはCSSだけで実装できますか？

はい。JavaScriptを使わずCSSの@keyframesアニメーションとtransition／transformだけで実装できます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

RELATED EFFECTS

矢印スライドボタン（Arrow Slide Button）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ