コピペで使える!CSSで大きさが変わるアニメーションボタンサンプル

概要

タイトルの通り、今回はHTML・CSSだけで大きさが変わるアニメーションボタンを作成してみたいと思います。

まずは以下サンプルの動作をご確認ください。
 

 
ランディングページ(LP)やアフィリエイトサイトでは、コンバージョンに直結するボタンをできるだけ目立たせたいという要望も多く、実装する機会は意外と少なくないかもしれません。

※デザインとしてどうかの判断は微妙なところです。

それでは早速コーディング内容を見てゆきましょう。
 

HTML部


<div class="button"><a href="#">お申し込みはこちら</a></div>

HTMLはとてもシンプルですね!
 

CSS部


.button {
  background: #ff0000;
  width: 300px;
  padding:10px 0;
  text-align:center;
  margin:0 auto;
  animation: squash 0.8s ease-in-out infinite;
}
.button a {
  color:#fff;
  display:block;
  width:100%;
  text-decoration:none;
  border-bottom:none;
}
.button:hover {
  opacity:0.9;
}
@keyframes squash {
  0% {transform: scale(1);}
  50% {transform: scale(1.05);}
  100% {transform: scale(1);}
}

できるだけ使い勝手がよいようにCSSを設定してみました。

アニメーションに関連する箇所は、.button内にある

animation: squash 0.8s ease-in-out infinite;

の部分と、@keyframes squash内にある


@keyframes squash {
  0% {transform: scale(1);}
  50% {transform: scale(1.05);}
  100% {transform: scale(1);}
}

.button側で0.8秒おきにアニメーションを呼び出し実行するといった流れになるかと思います。

今回のアニメーションでは大きさを変えたいため、scaleを、1→1.05→1と変化させています。
 

まとめ

実装は簡単ですので、是非活用してみてください。