KUSU'S SITE
2016年5月7日

【CSS】aタグで作ったボタンをプルンと動かす方法とは

  

 たまたまいろいろなサイトを見ていたらaタグで作ったボタンをプルンと動かす…という面白い動きをしたものを見かけたので、備忘録もかねて紹介したいと思います!
ちなみに当サイトでもWORKのページでも実装していたりします(^^)

プルンと動くというとどんなふうに動くの?

 ちなみにaタグで作ったボタンがプルンと動くというのは、以下のような感じになります!

上のように表示させるには、以下のようにHTMLとCSSを設定することで可能になります!

1. プルンと動かしたいaタグを記述する

 まず、プルンと動かしたいaタグを以下のようにHTMLソースに記述します。

<a href="URL">ボタン</a>

2. CSSを設定する

 まずaタグそのもののデザインは希望のものを設定しておきましょう。
その上で、下記のようにCSSを記述します。

a {
animation: prun 2.2s ease-in infinite;
-webkit-animation: prun 2.2s ease-in infinite;
-moz-animation: prun 2.2s ease-in infinite;
-o-animation: prun 2.2s ease-in infinite;
-ms-animation: prun 2.2s ease-in infinite;
}

@keyframes prun {
48%, 62% {transform: scale(1.0, 1.0)}
50% {transform: scale(1.1, 0.9)}
56% {transform: scale(0.9, 1.1) translate(0, -5px)}
59% {transform: scale(1.0, 1.0) translate(0, -3px)}
}

@-webkit-keyframes prun{
48%, 62% {-webkit-transform: scale(1.0, 1.0)}
50% {-webkit-transform: scale(1.1, 0.9)}
56% {-webkit-transform: scale(0.9, 1.1) translate(0, -5px)}
59% {-webkit-transform: scale(1.0, 1.0) translate(0, -3px)}
}

上記コードの2~5行目がaタグをプルンと動かすために必要なCSSの設定その1になります。

続いて9~14行目の
@keyframes prun {

}

というものが、実際にaタグをプルンと動かすために必要なCSSになります。

ただ、これだとFirefox系のインターネットブラウザではうまくボタンがプルンと動かない場合があるので、16~21行目の
@-webkit-keyframes prun{

}

でFirefox系のブラウザでもボタンをプルンと動かせるようになります!

まとめ

 以上の作業を行うことで、aタグで作ったボタンをプルンと動かすことが可能になります!
動きとしても目立ちますし、なんだかかわいいので何かの機会がありましたら使ってみてはいかがでしょうか(^-^)

スポンサーリンク
スポンサーリンク

コメントを残す




スポンサーリンク

ホームページ制作について

ホームページの制作依頼希望の方
はまず↓をクリック!
ホームページの制作依頼希望の方はまず↓をタップ!
サービスの詳細

WordPress講習会について

WordPress講習会について
気になる方ははまず↓をクリック!
WordPress講習会について気になる方はまず↓をタップ!
サービスの詳細

TWITTER

ページトップに戻る