光るボタンをHTMLとCSSで実装する方法

sunbeam-2761911_1280

目立つボタンでコンバージョン率を上げたい

ということであれば、光るボタンを実装するのも1つの手かもしれません(もちろん、必ずコンバージョンが上がるわけではないです)。

ということで以下では、CSSとちょっとしたHTMLで「数秒ごとにキラっと光るボタン」を実装する方法です。

こんな感じのやつ。

数秒おきに光るボタン[4]

通常のHTMLでも利用できますが、以下ではWordPressに実装する方法として紹介します。

スポンサーリンク
レクタングル(大)広告

主な手順

主な手順としてはこちら。

  1. CSSを貼り付ける
  2. ボタン用のHTMLを書く

基本的にコピペのみで実装する方法です。

CSSを貼り付ける

まず、WordPressに実装するには、テーマ(子テーマ)のstyle.cssに以下のCSSを貼り付けます。

上記は、サンプルコードなのでベンダープレフィックスは記入していません。

CSSのブラウザ対応状況については、以下で調べてみてください。

使用しているテーマによっては、CSSセレクターの優先度が違いスタイルが適用されないかもしれません。そういう場合は、優先度の高いCSSセレクターに修正してください。

ボタン色の変更

ボタンのbackground-colorを変更すると、ボタンの色を変更することができます。

ボタンの背景色を変更する場合は、以下などの色見本サイトとかを参考にすると良いかと思います。

色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色検索や旅する配色見本、カラー成分測定「色とりどり」といった色彩を調べるツールも充実しています。デザインからファッションや占いまで、色を扱うときに役立つのが配色見本です。さまざまな色の組み合わせを見て理...
日本の伝統色の名前とカラーコードが一目でわかるWEB色見本

光る間隔の変更

光るインターバルの変更は、以下の3s部分の数字を変更することで可能です。1s=1秒です。

またたく間隔は好みで変更してください。

今回はサンプルコードとして分かりやすいように、間隔を短めにしてあります。

ボタン用のHTMLを書く

あとは、ボタン用のHTMLを記入すればOKです。

aタグにclass=”btn-shine”と属性を指定することで、aリンクにボタンスタイルが適用されます。

こんな感じでHTMLを記入してください。

光るボタンのHTML

動作確認

あとは、HTMLを記入したページを開けば、以下のようにボタンが光ります。

数秒おきに光るボタン

一応、以下に実物も記入。

光るボタン

まとめ

こんな感じで、光るボタンはCSSは少し長めになりますが、仕組みを気にしないのであればコピペで簡単に実装できます。

CSSさえ記入してしまえば、あとはaリンクに「btn-shine」というクラス名をつけるだけなので。

ということで、

ここのボタンだけは目を引くようにしたい

ボタン用のクラスに光るボタンスタイルを割り当てたい

なんて場合は、試して効果を計測してみるのも良いかもしれません。