フリーランス｜WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 I R O D O R I D ESIGN
【コピペOK】ボタンにホバーした時のCSSアニメーション15選 RELEASE / 2024.6.9 UPDATE / 2024.06.07 css アニメーション コピペ ボタン ホバーボタンにホバーした時のアニメーションがいつも同じになっているコーダーも多いのではないでしょうか。デザイナーからホバーした時のアニメーションの指定やデザインがあれば、その通りに作ればいいですが、お任せの場合、大抵はいくつかのパターンを使いまわしてしまいます。
そんな時のためにコピペですぐに使えるボタンにホバーした時のCSSアニメーションを15種類まとめてみました。
どんなWebサイトでも違和感無く使うことが出来るシンプルなアニメーションを集めてみました。
HTMLは以下のタグ構造を想定しています。
<a href="#" class="button">もっと見る</a>この記事の目次を表示
- 1 半透明にする
- 2 色を反転させる
- 3 色を変化させる
- 4 角丸にする
- 5 シャドーをかける
- 6 テキストの間隔を広げる
- 7 中央から広がる下線を引く
- 8 左から右へ移動する線を引く
- 9 左から右へ移動する背景色を表現する
- 10 浮かせる
- 11 押す
- 12 グラデーションが光る
- 13 アイコンが動く
- 14 アイコンを拡大する
- 15 アイコンが消えて再び出現する
- 16 まとめ
半透明にする
ホバーした時にボタンを半透明にするアニメーションはこちら。
.button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; } .button:hover{ opacity: .6; }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
色を反転させる
ホバーした時にボタンの色を反転させるアニメーションはこちら。
.button{ width: 250px; height: 50px; background: #dc5a45; border: 1px solid #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; } .button:hover{ background: #fff; color: #dc5a45; }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
色を変化させる
ホバーした時に色を変化させるアニメーションはこちら。
.button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; } .button:hover{ background: #3d8582; }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
角丸にする
ホバーした時にボタンを角丸にするアニメーションはこちら。
.button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; } .button:hover{ border-radius: 25px; }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
シャドーをかける
.button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; } .button:hover{ box-shadow: 0 5px 15px rgba(0,0,0,.15); }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
テキストの間隔を広げる
ホバーした時にテキストの間隔を広げるアニメーションはこちら。
.button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; } .button:hover{ letter-spacing: .25em; }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
中央から広がる下線を引く
ホバーした時に中央から広がる下線を引くアニメーションはこちら。
<a href="#" class="button">もっと見る</a> .button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; position: relative; } .button::before{ content: ""; display: block; width: 0%; height: 5px; position: absolute; left: 50%; bottom: 0; background: #b53d2a; transition: all .3s ease-in-out; } .button:hover::before{ width: 100%; left: 0%; }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
左から右へ移動する線を引く
ホバーした時に左から右へ移動する線を引くアニメーションはこちら。
<a href="#" class="button">もっと見る</a> .button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; position: relative; } .button::before{ content: ""; display: block; width: 0%; height: 5px; position: absolute; right: 0; bottom: 0; background: #b53d2a; transition: all .3s ease-in-out; } .button:hover::before{ width: 100%; left: 0; right: unset; }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
左から右へ移動する背景色を表現する
ホバーした時に左から右へ移動する背景色を表現するアニメーションはこちら。
.button{ width: 250px; height: 50px; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; position: relative; } .button::before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; right: 0; bottom: 0; z-index: -2; background: #dc5a45; } .button::after{ content: ""; display: block; width: 0%; height: 100%; position: absolute; right: 0; bottom: 0; z-index: -1; background: #b53d2a; transition: all .3s ease-in-out; } .button:hover::after{ width: 100%; left: 0; right: unset; }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
浮かせる
ホバーした時にボタンを浮かせるアニメーションはこちら。
.button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; box-shadow: 0 5px 10px rgba(0,0,0,.05); } .button:hover{ transform: translateY(-5px); box-shadow: 0 5px 10px rgba(0,0,0,.25); }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
押す
ホバーした時にボタンを押すアニメーションはこちら。
.button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; box-shadow: 0 6px #b53d2a; } .button:hover{ transform: translateY(3px); background: #c95542; box-shadow: 0 3px #b53d2a; }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
グラデーションが光る
ホバーした時にグラデーションが光るアニメーションはこちら。
.button{ width: 250px; height: 50px; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; transition: all .3s ease-in-out; background: linear-gradient(90deg, rgba(220,90,69,1) 0%, rgba(232,199,46,1) 50%, rgba(220,90,69,1) 100%); background-size: 200%; backgroud-position: left center; } .button:hover{ background-position: right center; }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
アイコンが動く
ホバーした時にアイコンが動くアニメーションはこちら。
.button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; position: relative; } .button::after{ content: ""; display: block; width: 15px; height: 15px; margin-left: 15px; background-image: url(https://irodori-design-web.com/blog_image/2964/icon_arrow.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; transition: all .3s ease-in-out; } .button:hover::after{ transform: translateX(5px); }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
アイコンを拡大する
ホバーした時にアイコンが拡大するアニメーションはこちら。
.button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; position: relative; } .button::after{ content: ""; display: block; width: 15px; height: 15px; margin-left: 15px; background-image: url(https://irodori-design-web.com/blog_image/2964/icon_arrow.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; transition: all .3s ease-in-out; } .button:hover::after{ transform: scale(1.2); }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
アイコンが消えて再び出現する
ホバーした時にアイコンが消えて再び出現するアニメーションはこちら。
.button{ width: 250px; height: 50px; background: #dc5a45; text-decoration: none; color: #fff; display: flex; align-items: center; justify-content: center; position: relative; } .button::after{ content: ""; display: block; width: 15px; height: 15px; margin-left: 15px; background-image: url(https://irodori-design-web.com/blog_image/2964/icon_arrow.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; transition: all .3s ease-in-out; } .button:hover::after{ animation: slide-out-in 0.6s ease-in-out; } @keyframes slide-out-in { 40% { background-position: calc(100% + 15px) center; } 50%{ opacity: 0; } 55% { background-position: calc(-15px) center; } 60%{ opacity: 1; } }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
まとめ
いかがでしたか？基本的にどのデザインでも使えるようなものばかり集めてみました。ボタンにホバーした時のアニメーションに迷った時、是非参考にしてみて下さい。
関連記事一覧
【テクニック】CSSで半円・縁取り・弧を作る方法CSSは様々な形を作ることが出来ます。正円はもちろん、半円、縁取りの半円、半円の弧の部分などデザイナーが作るデザインに合 […]
【コピペOK】画像にホバーした時のCSSアニメーション20選Webサイトにはブログのサムネイル画像等、画像にリンク設定することがよくありますね。デザイナーからホバーアニメーションが […]
【CSS】z-indexが効かない時の原因と解決方法CSSのプロパティのひとつ「z-index」。このプロパティは要素同士の重なり順を指定する場合に使用します。基本的に数値 […]
【CSS】各プロパティの初期値一覧CSSを使用している際、プロパティの値を初期値に戻したいと思うことが多々あります。このプロパティの初期値って何だったかな […]
【コピペOK】WEBサイトでよく使う見出しデザインWEBサイトを制作している際、ついつい迷ってしまったり、ワンパターンになってしまう見出しのデザイン。ワンパターン化してし […]
【background-image】CSSだけでストライプ（ボーダー）を作る方法デザイナーが作ったデザインに変わった模様の背景があった場合、画像として表示しますよね。しかし、中には知らなければついつい […]
【コピペOK】HTMLとCSSで作る図形：サンプルコード集WEBサイトを作成していると様々な形状の要素を作成することになりますよね。画像として作成してしまえば簡単ですWEBサイト […]
【コピペOK】CSSでの吹き出しの作り方WEBサイトで吹き出しを作りたいと思った際、実はCSSだけで吹き出しを作ることは出来るんです。今回の記事ではCSSでの吹 […]
【background-image】CSSだけでストライプ（ボーダー）やドット模様を作るサンプル集CSSのbackground-imageを使うことでストライプ（ボーダー）やドット模様など意外と色んな背景模様を作ること […]
【テクニック】aタグのリンクを無効にする方法HTMLタグのaタグは別のページへ遷移させるための専用タグです。基本的にはaタグは別ページへ遷移させる目的で使用するため […]
【CSS入門】backgroundで2色や3色を指定する方法backgroundプロパティを使うことで2色、3色、もしくはそれ以上の色を同時に指定することが出来ます。この記事ではb […]
【徹底解説】CSSのみでネスト化対応！SCSSとの類似点と違いはじめてGoogle Chromeで実装されて以来、2023年ついに主要全ブラウザでSCSSを使わなくてもCSSだけでネ […]