【CSS】光りながら震えるアニメーションのボタンのCSS

2024年5月29日

Kizineko（COPPY管理人）

URLをコピーしました！

上記のように、光りながら、ぶるぶると震える/バイブレーションするボタンのCSSコードです。
LP等で訴求力の高いボタンにしたい場合に、使用すると効果的な場合があると思います。

目次（クリックでジャンプ）

光りながら震えるアニメーションのCSS

光らせたい要素にshine-and-vib というクラスを付けるだけでOKです。

<a class="contact-btn shine-and-vib" href="#">
  お問い合わせボタン
</a>

下記コードはSCSSで記述しています。CSSでコードを使いたい方は、手動またはツール等でCSSに変換して使ってください。
・オンラインSCSS→CSSコンバーター
・SCSSをCSSにリアルタイムで変えるツール

.contact-btn {
  display: block;
  background: #d97421;
  color: #fff;
  font-weight: bold;
  padding: 1rem 2rem;
  margin: 0 auto;
  max-width: 300px;
  width: 100%;
  text-align: center;
  border-radius: 5rem;
}
.shine-and-vib {
  display: block;
  position: relative;
  overflow: hidden;
  transition: 1s;
  animation: vib 3s linear infinite;
  &::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    transition: 300ms;
    animation: shine 2.5s ease-in-out infinite;
  }
  @-webkit-keyframes shine {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
  }
  @-webkit-keyframes vib {
    0%   { transform:translate(0); }
    20%   { transform:translate(0); }
    22%  { transform:translate(2px) rotate(2deg); }
    24%  { transform:translate(0, 0); }
    26%  { transform:translate(-2px) rotate(-2deg); }
    28% { transform:translate(0); }
    30%  { transform:translate(2px) rotate(2deg); }
    32% { transform:translate(0); }
    100% { transform:translate(0); }
  }
}