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

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

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

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

こんな感じのやつ。

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

主な手順

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

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

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

CSSを貼り付ける

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

/* ボタン */
.btn-shine {
  color: #fff;
  background-color: #c9171e;/*背景色の変更*/
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  line-height: normal;
  text-decoration: none;
  border: 2px solid transparent;
  padding: 14px 20px;
  font-size: 18px;
  margin: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.btn-shine:hover{
  color: #fff;
}

/* ボタンを光らせる */
.btn-shine:before {
  /*光るアニメーション用*/
  animation: shine 3s ease-in-out infinite;/*数字を変更することで光る間隔が変更*/
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}

@keyframes shine {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

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

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

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

ボタン色の変更

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

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

配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色

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

ironodata.info

日本の伝統色 和色大辞典 - Traditional Colors of Japan

日本の伝統色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

光る間隔の変更

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

animation: shine 3s ease-in-out infinite;

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

ボタン用のHTMLを書く

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

<a href="#" class="btn-shine">光るボタン</a>

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

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

動作確認

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

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

光るボタン

まとめ

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

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

ということで、

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

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

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