1. HOME
  2. html_css
  3. cssで作るボタンのホバーアニメーション(コピペ可)

cssで作るボタンのホバーアニメーション(コピペ可)

こんにちは。
ホームページでボタンを作ることはできるけど、そのボタンにどういう効果をつけよう?
と悩むことってないですか?
今回はサンプルとして、ボタンのホバーエフェクトを作ったのでサンプルとしてまとめました。

まずはベースとなるhtmlとcssです。

html
css

こちらがベースとなるボタンです。カーソルをあててもなにも変化しません。
これは、hover(ホバー)した時の指定が何もされていないからですね。

それではさっそくボタンを紹介していきます。

cssで作るボタンのホバーアニメーション(コピペ可)

01.cssで作るボタンのホバーアニメーション(opacity)

カーソルを当ててみると?

opacityという透過性を増すcssプロパティを使っています。

css

追加したcssはopacityだけですね。button01ですと、opacity: 0.7;があたっていますが、opacityの値を小さくすれば(0に近づける)、透過性が増しますし、1にすれば、透過性は0になります。

※注意点
button01のような文字と背景色だけのボタンであれば、opacityのみを利用したホバーアニメーションはあまり使いません。それよりはこれから紹介していく、背景色と文字色が変わるというホバーアニメーションの方が一般的になります。

※使い方としては、冒頭ののコードをベースに追記していくことになります。

もし01のボタンを作りたいならば、、、

html
css

これでopacity効果のついたボタンが完成します。02以降も同様の手順でやっていくと思い通りのボタンを使うことができます。

02.cssで作るボタンのホバーアニメーション(文字と背景色が入れ替わる)

カーソルを当ててみると?

css

ボタンをホバーすると色が逆転することがわかります。このタイプのボタンですとこのような変化が一般的です。

次はこのボタンの変化する時間に変化を持たせてみます。

03.cssで作るボタンのホバーアニメーション(文字と背景色が入れ替わる)※transition有り

カーソルを当ててみると?

2番目のボタンに比べて変化が少し遅くなっているのがお分かりでしょうか。これはcssのプロパティのtransitionを使っています。

css

transitionを利用することで動きに変化をつけることができます。もし変化にかかる時間を長くしたいのであれば、300msとかかれている箇所を1000msなどにし、変化させる時間を調整することができます。

04.cssで作るボタンのホバーアニメーション(左から背景色が変わる)

カーソルを当ててみると?

ここからちょっと複雑になります。黄色い背景は擬似要素を使っています。

css

擬似要素を使ってまったく同じサイズのものを用意しておき、ホバーすると擬似要素が動くようにしています。もともと置いてあるものを隠すために“overflow:hidden”を使っています。隠さないと以下のようになります。

05.cssで作るボタンのホバーアニメーション(上から背景色が変わる)

カーソルを当ててみると?

css

04では擬似要素のleftの位置を調整しましたが、この05ではtopの位置を調整しています。

06.cssで作るボタンのホバーアニメーション(斜めにしてスタイリッシュ)

カーソルを当ててみると?

css

04の左から出てくるものをアレンジしました。transform:skewを使って斜めにして、scaleで余白を調整しています。

07.cssで作るボタンのホバーアニメーション(左右から。扉風。)

カーソルを当ててみると?

css

左右から動くようにしたいので、これまでの擬似要素afterに加えて擬似要素beforeも一緒に使っています。左右で位置を変えるのみですので、位置が違うだけです。またwidthを0から変化させることでホバーにより出現したような演出が可能になります。

08.cssで作るボタンのホバーアニメーション(ボタン風)

カーソルを当ててみると?

css

これまではpositionで位置を調整してきましたが、今回はtransformを使って変化をつけました。色をもっとかっこよくしたらかっこいいボタンになる、、はず、、です!

09.cssで作るボタンのホバーアニメーション(枠線)

カーソルを当ててみると?

html
css

spanを入れています。これは、ホバー時の直線が4本必要になるからです。またtransition-delayを使って、動かすタイミングを調整することで1本の線が継続してみえるように調整しています。

まとめ

いかがだったでしょうか。昨今ボタンがないホームページの方が珍しいと思うので、ボタンの知識は必須になります。迷った時に、この記事を参考にボタンを作れるようにしていきたいので、アイデアがでたら随時更新予定です。

コピペで使えるようにしたつもりなので、わかりづらかったら教えていただけると嬉しいです。

ここに載せたコードはあくまでサンプルです。cssをいじれば違う効果をつけることができるので、ぜひぜひ作ってみてください。わかり始めたら面白いですよ。

他のカテゴリーの記事をみる