【コピペで使える】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と変化させています。
 

まとめ

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

Follow me!

投稿者プロフィール

tasan

最新の投稿

• お知らせ【WordPress】指定期間に投稿された記事一覧をCSV出力する実装
• SEO対策・ホームページ集客Pz-LinkCardでデフォルトのサムネイル画像を表示する方法
• SEO対策・ホームページ集客検索結果にサブドメインサイトのサイト名を反映させる最低限の記述（構造化 @type Website）
• Webサイト制作実績USPF-CWA ESL Center（南フィリピン大学付設語学学校）様のホームページ制作を担当させていただきました。