Weblasts

コピペ対応!個人的によく使うボタンのhoverアニメーション・エフェクト

これだとクリックイベントみたいだけどボタンのhoverエフェクト・アニメーション

ボタンのアニメーションに関してはデザイナーごとに方針が違うみたいで、「適当でいいスよ」という人もいれば「不透明度だけでいいですよ」という人、漠然と「かっこよくしてください」という人それぞれで、個人的に困るもので、過去にやったものを備忘録的に残しておこうと思ったので記事にしてみました

状況によっては調整が必要になるかもしれんませんが、そのままコピペができるようにもしておくので、こんなもので良ければどうぞ

背景を動かす系

自分が携わる案件ではゴーストボタン+背景のアニメーションは使う頻度が高め

ベースとなるHTMLはこちら

>cssは見た目を作る部分など毎回同じコードが出てきて長くなってしまいますが、初学者の面倒を見ていた時に基本のコードをコピペしない人が多く、動かないと悩んでいた人が多かったので、こういう形にしておきます。

シンプルに反転させる

ゴーストボタンだと一番ポピュラーなものがこれだと思います。

反転させるサンプル
BUTTON

hover時に、文字の色と背景色を反転させるだけでおしまい。

左からニョキっと背面が出てきて反転する

ここからは疑似要素を使うのでコードは長めになります。

左からニョキっとサンプル
BUTTON

HTMLの構造をもう少し複雑にすればcssは減りますが、基準となるものを用意していますのでこのような形にしました。

横方向はwidthプロパティを操作してあげれば実現可能です

右からニョキッとさせたいのであればleftプロパティをrightプロパティに変えるだけです

上からニョキッと背面が出てきて反転する

前述したものを応用すればできると思いますが、一応用意しました

上からニョキッとサンプル
BUTTON

横方向はwidthプロパティで操作していましたが、縦方向はheightプロパティを操作することで実現可能です。

下からニョキッとさせたいのであれば、topプロパティをbottomプロパティに変えることで実現できます。

左から斜めにした背面ニョキッとが出てくる

背面を斜めにするだけで印象がガラッと変わります。

左から斜めにニョキッとサンプル
BUTTON

基本は他のものと同じだけど、skewで傾斜をつける点と、傾斜をつけたので全体を覆うためには100%以上の幅にしないとだめってところがキモ

中心から左右に広がる

端からでなく中心からのアニメーションも可能

中心から左右にサンプル
BUTTON

要素の位置を水平方向中央にする工夫を加えるだけ

中心から上下に広がる

一つ前のものの垂直バージョン

中心から左右にサンプル
BUTTON

中心から斜めで左右に広がる

斜めもいける

中心から斜めで左右にサンプル
BUTTON

その他

その他と書きましたが一つだけしかありません

矢印が出てきて動く

かなりあっさりめだけど、色々なボタンで使えるタイプですね

矢印が出てくるサンプル
BUTTON

三角やアニメーションの回数・時間は調整可能