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

tasan

概要

タイトルの通り、今回は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と変化させています。

まとめ

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

Follow me!

投稿者プロフィール

tasan

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

概要

HTML部

CSS部

まとめ

投稿者プロフィール

最新の投稿

“【コピペで使える】CSSで大きさが変わるアニメーションボタンサンプル” に対して1件のコメントがあります。

ウェブの外注、フリーランスと法人どっちがいい？

千葉県松戸市のプログラミング教室5選