【CSS】キラッと光るボタンの作り方！目立つボタンでクリック率を向上させよう

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSだけでキラッと光るボタンの作り方をご紹介しています。

商品やサービスの紹介などで「詳細はこちら」や「公式サイトはこちら」というようなボタンのアニメーションとしてキラッと光るボタンを見かけたことがあるかと思います。キラッと光らせることでスクロールをする手が止まりますし、ボタン自体が目立つため、ついクリックしたくなりますよね。アフィリエイターやブロガーの方が使用しているようなWordPressのテーマでは、キラッと光るボタンのアニメーションはデフォルトで用意されていたりしますが、残念ながら無料のテーマにはないボタンのアニメーションになります。

しかし、安心してください。本記事でご紹介する内容を使用すれば、キラッと光るボタンを簡単に作ることができます。今回キラッと光るボタンの作り方を2パターンご紹介いたします。気に入った目立つボタンを実装して、ぜひクリック率の向上に役立ててください！

では、解説していきます。

キラッと光が走るボタン

ボタンの上をキラッとした光が走るボタンになります。ボタンの疑似要素（「:before」）に白いグラデーションの背景を設定して、アニメーションで「position」を移動させてキラッとした光を再現しています。疑似要素の幅や背景色は自由に変更することができるため、カスタマイズ性を重視されている方におすすめの実装方法になります。

DEMO

See the Pen
Shiny Button1 | CSS by ryohei (@intotheprogram)
on CodePen.

HTML

<a class="shiny-btn" href="#">MORE INFO</a>

CSS

@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}

.shiny-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #384878;
    overflow: hidden;
}

.shiny-btn::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

キラッとした光を拡大させるボタン

こちらは疑似要素の拡大と透明度を変更してキラッとした光を再現する方法になります。光が走るというよりは、サーチライトの光が通り過ぎるといったイメージに近いかと思います。光の色や透明度を変更するタイミングを自由に変えることができます。

DEMO

See the Pen
Shiny Button2 | CSS by ryohei (@intotheprogram)
on CodePen.

HTML

<a class="shiny-btn" href="#">MORE INFO</a>

CSS

@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }

    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}

.shiny-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #384878;
    overflow: hidden;
}

.shiny-btn::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}