【CSS】ホバーで広がるアニメーションボタンの作り方

ホバー時に円形の背景が横に広がり、矢印アイコンが右に移動するインタラクティブなボタンの実装方法をご紹介します。HTMLとCSSのみで実装できるので、JavaScriptは不要です。

完成イメージ

マウスをボタンに乗せると、次のようなアニメーションが発生します。

円形の背景が左から右へスムーズに広がる
テキストの色が白に変化
ボタン全体がわずかに浮き上がる

視覚的にユーザーの注目を集められるため、CTAボタンや重要なリンクにおすすめです。

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: ボタンのテキスト部分

カスタマイズ時の注意点

href属性でリンク先URLを指定してください
sample-btn-text内のテキストを変更することで、ボタンの文言をカスタマイズできます
aria-hidden="true"は装飾要素をスクリーンリーダーから隠すための属性なので、そのまま残してください

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. アニメーション速度の調整

アニメーションの速度を変えたい場合は、transitionの秒数を調整します。

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

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

より速くしたい場合: 0.3s
よりゆっくりにしたい場合: 0.6s

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にoverflow: hiddenを設定することで、背景が伸びる際に要素からはみ出さないようにしています。この設定がないと、アニメーションが不自然に見えてしまいます。
position: absolute
矢印とテキストをposition: absoluteで絶対配置することで、背景の伸縮に影響されず、意図した位置に配置できます。
aria-hidden=”true”
aria-hidden="true"を使用して、装飾的な要素をスクリーンリーダーから隠しています。また、focus-visibleを使ってキーボード操作時のフォーカス表示も実装しています。

ブラウザ対応

ブラウザ（Chrome, Firefox, Safari, Edge）で動作します。

Internet Explorer 11には対応していません。IE11のサポートが必要な場合は、フォールバック用のシンプルなスタイルを用意することをおすすめします。

まとめ

このアニメーションボタンは、JavaScriptを使わずHTMLとCSSのみで実装できるインタラクティブなデザインです。
CTAボタンや重要なリンクに使用することで、ユーザーの視線を自然に誘導できます。ぜひカスタマイズして、サイトに実装してみてください。

SWELLのヘッダー(ナビゲーション)にボタンを追加する方法については、別記事で異なるデザインのサンプルコードをご紹介しています。

WordPress個別サポート

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

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

詳細はこちらから