My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

【CSS3】 アニメーションボタン

f:id:sntkk3:20170413234227g:plain

CSS3によるアニメーションボタン No.2

拡大・縮小するアニメーションボタンを作成しました。

Demo css3 アニメーションボタン(拡大・縮小) | WebStock



以下、ソースを記載します。

[ソース] html

<a href="#"><img class="area-main-topbtnr" src="http://サイト/パス/画像ファイル名" width="100%"></a>  

上記、サイト名、パス、画像ファイル名は適宜変更してください。


[ソース] css

.area-main-topbtnr{
  z-index:1;animation:a 1.4s;animation-iteration-count:infinite;
  -webkit-animation:a 1.4s;
  -webkit-animation-iteration-count:infinite
}
@keyframes a{
  0%{transform:scale(0.7,0.7)}
  0%,50%{opacity:1}
  50%{transform:scale(1.0,1.0)}
  to{transform:scale(0.7,0.7)}
}
@-webkit-keyframes a{
  0%,to{opacity:1}
  0%{-webkit-transform:scale(0.7,0.7)}
  50%{
  -webkit-transform:scale(1.0,1.0)}50%,
  to{opacity:1}to{-webkit-transform:scale(0.7,0.7)
  }

[捕捉]

ちなみに、以下のようなボタンジェネレーターサイトを利用すると、
画像不要、CSSだけで簡単にボタンが作れます。

CSS Button Generator - imageless css buttons maker :
http://css-button-generator.com