WEBデザインチュートリアル

CSS：キラっと光るエフェクトで「シンプルだけど目立つボタン」の作り方

2020年4月26日

こんにちは、リョウヘイです。
今回は「キラっと光るボタン」の作り方。

「ボタンを目立たせたいけど、デザインはゴテゴテさせたくない…」

そんなときは、ちょっとしたエフェクトのアニメーションで解決するのも1つの手です。javascriptを使わずにcssだけで作れますよ。

CSSだけでボタンを光らせる

完成形はこんな感じ。ときどきキラっと光るので、自然に目が行きますよね。

光るボタン

HTML

HTMLはただのaタグなのでとてもシンプル。”button”と”shine”のclassを付けています。

html

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

1	<a href="#" class="button shine">光るボタン</a>

CSS

CSSでは”button”クラスで色や角丸などボタン自体のstyleを書き、”shine”で光るエフェクトに関するstyleを書いています。

css

CSS

/* ボタン自体のstyle */
.button{
  color: #fff;
  background: #c9171e;
  font-size: 16px;
  border-radius: 4px;
  text-decoration: none;
  padding: 1em 3em;
  display: inline-block;
}
/* 光らせるためのstyle */
.shine{
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
/* 光の疑似要素 */
.shine::before{
  content: "";
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #fff;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}
/* 光の動き */
@keyframes shine{
  0% {
    left: -160%;
    opacity: 0;
  }
  70% {
    left: -160%;
    opacity: 0.5;
  }
  71% {
    left: -160%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}

/* ボタン自体のstyle */

.button{

color: #fff;

background: #c9171e;

font-size: 16px;

border-radius: 4px;

text-decoration: none;

padding: 1em 3em;

display: inline-block;

}

/* 光らせるためのstyle */

.shine{

border: 2px solid transparent;

position: relative;

overflow: hidden;

}

/* 光の疑似要素 */

.shine::before{

content: "";

animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;

background-color: #fff;

width: 140%;

height: 100%;

transform: skewX(-45deg);

top: 0;

left: -160%;

opacity: 0.5;

position: absolute;

}

/* 光の動き */

@keyframes shine{

0% {

left: -160%;

opacity: 0;

}

70% {

left: -160%;

opacity: 0.5;

}

71% {

left: -160%;

opacity: 1;

}

100% {

left: -20%;

opacity: 0;

}

まとめ

アニメーションの演出なら、サイト全体のイメージを損なわずにボタンを目立たせることが出来て便利です。

もし気に入って頂けたらコピペして使ってもOKなので、ぜひぜひ参考にしてみてくださいね。