アニメーションボタンの作り方

ホバー時に背景が広がり、矢印が動くインタラクティブなボタンの実装方法をご紹介します。

完成イメージ

ホバーすると円形の背景が横に広がり、矢印アイコンが右に移動するアニメーションボタンです。

HTML

<div class="sample-button-wrapper">
    <a href="https://example.com/contact/" class="sample-cta-btn">
        <span class="sample-btn-circle" aria-hidden="true">
            <span class="sample-arrow-icon"></span>
        </span>
        <span class="sample-btn-text">無料相談・お問い合わせはこちら</span>
    </a>
</div>

HTML構造

.sample-button-wrapper: ボタン全体を囲むコンテナ
.sample-cta-btn: ボタン本体のリンク要素
.sample-btn-circle: 円形の背景を持つアイコン部分
.sample-arrow-icon: 矢印アイコン（CSSで描画）
.sample-btn-text: ボタンのテキスト部分

CSS

.sample-button-wrapper {
    text-align: center;
    margin: 30px 0;
}

/* ボタン本体 */
a.sample-cta-btn {
    text-decoration: none;
    color: inherit;
    all: unset;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    width: 21rem;
    height: 3.5rem;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    box-sizing: border-box;
}

a.sample-cta-btn:hover {
    transform: translateY(-2px);
}

a.sample-cta-btn:active {
    transform: translateY(0);
}

/* 円形アイコン部分 */
.sample-cta-btn .sample-btn-circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, #89c4d9 0%, #6ca1c1 100%);
    border-radius: 2rem;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    overflow: hidden;
    flex-shrink: 0;
}

.sample-cta-btn .sample-btn-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.sample-cta-btn:hover .sample-btn-circle::before {
    opacity: 1;
}

/* ホバー時に横に伸びる */
.sample-cta-btn:hover .sample-btn-circle {
    width: 100%;
}

/* 矢印アイコン */
.sample-cta-btn .sample-arrow-icon {
    position: absolute;
    top: 50%;
    left: 1.125rem;
    width: 1.25rem;
    height: 0.125rem;
    background: white;
    transform: translateY(-50%);
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    border-radius: 1px;
}

.sample-cta-btn .sample-arrow-icon::before {
    position: absolute;
    content: '';
    top: -0.25rem;
    right: -0.0625rem;
    width: 0.5625rem;
    height: 0.5625rem;
    border-top: 0.125rem solid white;
    border-right: 0.125rem solid white;
    transform: rotate(45deg);
    border-radius: 1px;
}

/* ボタンのテキスト */
.sample-cta-btn .sample-btn-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    padding-left: 3rem;
}

/* ホバー時のテキスト色変更 */
.sample-cta-btn:hover .sample-btn-text {
    color: white;
}

/* ホバー時の矢印移動 */
.sample-cta-btn:hover .sample-arrow-icon {
    transform: translate(0.5rem, -50%);
}

/* フォーカス状態 */
.sample-cta-btn:focus-visible {
    outline: 3px solid rgba(108, 161, 193, 0.5);
    outline-offset: 4px;
}

カスタマイズのポイント

1. ボタンのサイズ変更

.sample-cta-btn {
    width: 21rem;  /* ボタンの幅 */
    height: 3.5rem; /* ボタンの高さ */
}

.sample-cta-btn .sample-btn-circle {
    width: 3.5rem;  /* アイコンのサイズ */
    height: 3.5rem;
}

2. カラーの変更

.sample-cta-btn .sample-btn-circle {
    background: linear-gradient(135deg, #89c4d9 0%, #6ca1c1 100%);
}

.sample-cta-btn .sample-btn-text {
    color: #334155; /* 通常時のテキスト色 */
}

.sample-cta-btn:hover .sample-btn-text {
    color: white; /* ホバー時のテキスト色 */
}

3. アニメーション速度の調整

.sample-cta-btn {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

0.45sの部分を変更することで、アニメーションの速度を調整できます。

4. 矢印の移動距離

.sample-cta-btn:hover .sample-arrow-icon {
    transform: translate(0.5rem, -50%); /* 0.5remの部分を調整 */
}

実装のコツ

イージング関数: cubic-bezier(0.65, 0, 0.076, 1)を使用することで、滑らかで心地よいアニメーションがつくれます
overflow: hidden: .sample-btn-circleに設定することで、背景が伸びる際にはみ出さないように
position: absolute: 矢印とテキストを絶対配置することで、背景の伸縮に影響されない
aria-hidden=”true”: アイコン部分は装飾なので、スクリーンリーダーから隠す

ブラウザ対応

ブラウザ（Chrome, Firefox, Safari, Edge）で動作します。IE11には対応していません。

まとめ

このボタンは、シンプルなHTMLとCSSのみで実装できる、インタラクティブなデザインです。
カラーやサイズを変更するだけで、様々なデザインに対応できます。ぜひカスタマイズしてみてください。

SWELLのヘッダー（ナビゲーション）にボタンを追加する方法はこちらをご参照ください。別デザインのサンプルコードを載せています。

WordPress個別サポート

自分でやってみたけれどうまくいかない
やりたいことはあるけど方法がわからない

そんなときはお気軽にご相談ください。
マンツーマンでサポートいたします。

ご相談はこちらから