【CSSアニメーション】コピペでできる。CSSでボタンを光らせる方法

光るボタンよくサイトで使われています。難しいと思ってませんか？
実は簡単に実装できるんです。
コピペでいけるソースコードをまとめましたので、
よかったらご覧ください。

光るボタン

aタグにshineとういうクラスを追加ください。

■CSS

a.test {
  text-align: center;
  display :block;
  padding: 1em;
  color: #FFF;
  background: linear-gradient( 0deg , #970000 0%, #4e0000 100%);
  text-decoration: none;
  position: relative;
}

.shine {
  overflow: hidden;
}

.shine::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.75) 32%, rgba(255, 255, 255, 0.75) 78%, rgba(255, 255, 255, 0) 82%);
  animation: shine-loop 4s linear infinite;
}

@keyframes shine-loop {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(200%);
  }
}

どうでしたか？簡単でしょ？
数値を変更して自分好みにカスタマイズしてOK
楽してコーディングしていきましょう！