バウンドボタン

初心者でも簡単コピペで実装できるボタンホバーアニメーション。
ボタンをホバーするとバウンドしだすアニメーションが思わずクリックしたくなる。
PCメインLPなどのCTAボタンにおススメ。

HTML

<a href="#" class="ugkBtnBounce">＼ 30%OFFで購入 ／</a>

CSS

.ugkBtnBounce {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  max-width: 100%;
  height: 60px;
  border-radius: 100px;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  background-color: #535357;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transform: translateZ(0);
  will-change: transform;
}
@keyframes cta-spring {
  0% {
    transform: translateY(0);
  }
  14% {
    transform: translateY(-8px);
  }
  26% {
    transform: translateY(3px);
  }
  36% {
    transform: translateY(-9px);
  }
  46% {
    transform: translateY(2px);
  }
  56% {
    transform: translateY(-5px);
  }
  66% {
    transform: translateY(1px);
  }
  70% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
.ugkBtnBounce:hover {
  animation: cta-spring 2s infinite;
}

実際の動き

＼ 30%OFFで購入／

みんなにもシェアしてあげて！

この記事を書いた人

IYO

WEBサイトで使える“動くUI”を、コピペで実装可能にし、どこでも誰でも使えるコードに特化して発信しているフロントエンドエンジニア。
中学生で初めてコードに出会い初めてコーディングを知る。
その後、WEB制作会社のフロントエンドエンジニアとしてキャリアをスタートし、フリーランスを経て、現在はWEB制作会社の代表取締役。
コーディングによって人生を創り上げてきたからこそ、コードを通して誰かの役に立てたらという想いで、これまでの知識と経験を総動員したコードを公開中。