光るボタンを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色見本

光る間隔の変更

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

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

今回はサンプルコードとして分かりやすいように、間隔を短めにしてあります。
スポンサーリンク
レクタングル(大)広告

ボタン用のHTMLを書く

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

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

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

光るボタンのHTML

動作確認

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

数秒おきに光るボタン

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

光るボタン

まとめ

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

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

ということで、

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

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

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

『光るボタンをHTMLとCSSで実装する方法』へのコメント

  1. 名前:ななしー 投稿日:2020/01/18(土) 10:23:29 ID:7ae444fc6

    他のサイトを見てもできませんでしたが、こちらのを参考にしらた無事できました!
    カスタマイズも詳しく載っていて助かります^^
    ありがとうございます。

  2. わいひら 名前:わいひら 投稿日:2020/01/19(日) 13:51:04 ID:95cacc947

    うまくいったようでよかったです^^
    なるべくわかりやすいようにと書いたつもりだったので、そのように言っていただけると嬉しいです。