Home
CSS
【CSSのみ】ボタンのホバーアニメーションまとめ

【CSSのみ】ボタンのホバーアニメーションまとめ

公開日
2021.08.21
更新日
2022.07.09
【CSSのみ】ボタンのホバーアニメーションまとめ

どうも!かけちまるです!

サイトをコーディングするときリンクボタンを設置することが多いと思います。
そのボタンを設置するときサイト閲覧者にボタンが押せることがわかりやすいためにホバーアニメーションはほぼ必須だと思います。

サイトのコーディングをする時のボタンのホバーアニメーションですが、過去に実装した動きを使い回してばかりで表現の幅が狭いままになっていませんか?
そんな人のために実際のコーディングで使えそうなホバーアニメーションとちょっとトリッキーなホバーアニメーションをいくつか紹介していきます。

全てCSSで実装できるのでそこまで面倒な実装ではないと思いますので試してみてください。

透過する

おそらく一番手軽な方法だと思います。
HTMLもCSSもシンプルに実装できます。

ホバーするとボタンが透過するアニメーション

実装サンプル

透過するボタン

HTML

HTML
コピー
<a class="link_btn" href="">透過するボタン</a>

CSS

CSS
コピー
.link_btn{ border-radius: 25px; border: 1px solid #000; color: #000; font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; width: 300px; height: 50px; opacity: 1; transition: all 0.3s ease-out; } .link_btn:hover{ opacity: 0.7; }

背景色と文字色を変化させる

割と手軽でシンプルに実装できます。
HTMLもCSSもシンプルに実装できます。

ホバーすると背景色と文字色が変化します。

実装サンプル

背景色と文字色を変化

HTML

HTML
コピー
<a class="link_btn" href="">背景色と文字色を変化</a>

CSS

CSS
コピー
.link_btn{ border-radius: 25px; border: 1px solid #000; color: #000; font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; width: 300px; height: 50px; transition: all 0.3s ease-out; } .link_btn:hover{ background-color: #000; border: 1px solid #000; color: #fff; }

矢印の出現

CSSが少し複雑になります。
HTMLはシンプルに実装できます。

ホバーすると矢印が出現しボタンのwidthが少し伸びます。

実装サンプル

矢印の出現

HTML

HTML
コピー
<a class="link_btn" href="">矢印の出現</a>

CSS

CSS
コピー
.link_btn{ border-radius: 30px; border: 1px solid #000; color: #000; display: inline-block; font-size: 16px; font-weight: bold; padding: 15px 60px; } .link_btn::before{ content: ""; margin-left: 16px; } .link_btn::after{ content: "〉"; margin-left: 0px; opacity: 0; transition: all 0.3s ease; } .link_btn:hover::after{ margin-left: 20px; opacity: 1; }

上下に文字が切り替わる

ホバーすると上下に文字が切り替わります。

実装サンプル

上下にテキスト
ポイント
  • ・擬似要素のcontent: attr(data-content);data-content属性の文字を取得している。

HTML

HTML
コピー
<a class="link_btn" href=""> <div class="link_text_wrap"> <div class="link_text" data-content="上下にテキスト">上下にテキスト</div> </div> </a>

CSS

CSS
コピー
.link_btn{ box-sizing: border-box; border-radius: 25px; border: 1px solid #000; display: flex; align-items: center; justify-content: center; width: 300px; height: 50px; transition: all 0.2s linear; } .link_text_wrap{ overflow: hidden; } .link_text{ color: #000; font-size: 16px; font-weight: bold; transform: translateY(0%); transition: all 0.6s cubic-bezier(.215,.61,.355,1); } .link_text::after{ content: attr(data-content); position: absolute; top: 100%; left: 0%; } .link_btn:hover .link_text{ transform: translateY(-100%); }

流れる文字(電光掲示板)

ホバーしてる間はずっと文字が流れるアニメーションです。

実装サンプル

流れる文字
ポイント
  • ・擬似要素のcontent: attr(data-content);data-content属性の文字を取得している。
  • ・@keyframesを使用している。

HTML

HTML
コピー
<a class="link_btn" href=""> <span class="link_text" data-content="流れる文字">流れる文字</span> </a>

CSS

CSS
コピー
.link_btn{ border-radius: 25px; border: 1px solid #000; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 300px; height: 50px; } .link_text{ color: #000; font-size: 16px; font-weight: bold; position: relative; } .link_text::before{ content: attr(data-content); position: absolute; top: 0%; left: 0%; transform: translateX(-200%); } .link_btn:hover .link_text{ animation-name: text-flow; animation-duration: 2.0s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes text-flow{ 0%{ transform: translateX(0%); } 100%{ transform: translateX(200%); } }

グリッチアニメーション その1

使い所は少なそうで凝ったデザインです。
HTMLはシンプルですが、CSSが複雑になります。

ホバーすると心霊現象のようなグリッチアニメーションが始まります。

実装サンプル

グリッチアニメーション01
ポイント
  • @keyframesを使用している。
HTML
コピー

HTML

HTML
コピー
<a class="link_btn” href="">グリッチアニメーション01</a></div>

CSS

CSS
コピー
.link_btn{ border-radius: 25px; border: 1px solid #000; color: #000; font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 300px; height: 50px; position: relative; transition: all 0.3s ease-out; } .link_btn:hover{ animation-name: glitch_skew; animation-duration: 0.7s; animation-iteration-count: infinite; } .link_btn::after{ content: ""; box-shadow: rgba(0, 0, 0, 0.5) 0 0 15px 2px; background: rgba(255,255,0,0.5); width: 100%; height: 1px; opacity: 0; position: absolute; left: 50%; top: 0; transform: translateX(-50%); } .link_btn:hover::after{ animation-name: glitch_scan; animation-duration: 3s; animation-iteration-count: infinite; opacity: 1; } @keyframes glitch_skew{ 0%{ transform: skewX(0deg); } 5%{ transform: skewX(4deg); opacity: 0.5; } 10%{ transform: skewX(0deg); opacity: 1; } 15%{ transform: skewX(-7deg); opacity: 0.5; } 20%{ transform: skewX(0deg); opacity: 1; } 45%{ transform: skewX(5deg); opacity: 0.5; } 50%{ transform: skewX(0deg); opacity: 1; } 55%{ transform: skewX(0deg); opacity: 0.5; } 60%{ transform: skewX(0deg); opacity: 1; } 75%{ transform: skewX(4deg); } 80%{ transform: skewX(0deg); } 85%{ transform: skewX(-10deg); opacity: 0.5; } 90%{ transform: skewX(0deg); opacity: 1; } 100%{ transform: skewX(0deg); } } @keyframes glitch_scan{ 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } }

グリッチアニメーション その2

使い所は少なそうで凝ったデザインです。
HTMLもCSSも複雑になります。

ホバーすると色の三原色を活用した映像チックなグリッチアニメーションが始まります。

実装サンプル

グリッチパターン02
グリッチパターン02
グリッチパターン02
グリッチパターン02
POINT
  • @keyframesを使用している。

HTML

HTML
コピー
<a class="link_btn” href=""> <div class=“link_text_red">グリッチパターン02</div> <div class="link_text_blue">グリッチパターン02</div> <div class="link_text_green">グリッチパターン02</div> <div class="link_text_main">グリッチパターン02</div> </a>

CSS

CSS
コピー
.link_btn{ border-radius: 25px; border: 1px solid #000; color: #000; display: block; font-size: 16px; font-weight: bold; overflow: hidden; width: 300px; height: 50px; position: relative; } .link_btn:hover{ animation-name: glitch-skew; animation-duration: 4.0s; animation-delay: 1.0s; animation-timing-function: cubic-bezier(.25, .46, .45, .94); animation-iteration-count: infinite; } @keyframes glitch-skew{ 0% { transform: skew(0deg, 0deg); } 28% { transform: skew(0deg, 0deg); filter: blur(0); } 30% { transform: skew(-20deg, 0deg); filter: blur(4px); } 32% { transform: skew(20deg, 0deg); } 34% { transform: skew(0deg, 0deg); filter: blur(0); } 58% { transform: skew(0deg, 0deg); filter: blur(0); } 60% { transform: skew(-20deg, 0deg); filter: blur(4px); } 62% { transform: skew(20deg, 0deg); } 64% { transform: skew(0deg, 0deg); filter: blur(0); } 66% { transform: skew(-20deg, 0deg); filter: blur(4px); } 68% { transform: skew(20deg, 0deg); } 70% { transform: skew(0deg, 0deg); filter: blur(0); } 100% { transform: skew(0deg, 0deg); } } .link_text_red, .link_text_blue, .link_text_green{ opacity: 0.6; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .link_text_red{ color: red; } .link_btn:hover .link_text_red{ animation-name: glitch; animation-duration: 0.3s; animation-timing-function: cubic-bezier(.25, .46, .45, .94); animation-iteration-count: infinite; } .link_text_blue{ color: blue; } .link_btn:hover .link_text_blue{ animation-name: glitch; animation-duration: 0.3s; animation-timing-function: cubic-bezier(.25, .46, .45, .94); animation-iteration-count: infinite; animation-direction: reverse; } .link_text_green{ color: #00FF0B; } .link_btn:hover .link_text_green{ animation-name: glitch; animation-duration: 0.3s; animation-delay: 0.1s; animation-timing-function: cubic-bezier(.25, .46, .45, .94); animation-iteration-count: infinite; } @keyframes glitch{ 0% { transform: translate(-50%,-50%); } 20% { transform: translate(-52%,-48%); } 40% { transform: translate(-52%,-52%); } 60% { transform: translate(-48%,-48%); } 80% { transform: translate(-48%,-52%); } 100% { transform: translate(-50%,-50%); } } .link_text_main{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

斜め線の出現

ホバーすると背景が透明になり、斜めの枠線が2つ出現します。

割と汎用性はありそうなデザインです。

実装サンプル

斜めの枠線
POINT
  • ・擬似要素の::before::afterを使用

HTML

HTML
コピー
<a class="link_btn" href="">斜めの枠線</a>

CSS

CSS
コピー
.link_btn{ background-color: #000; color: #fff; font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; width: 300px; height: 50px; position: relative; transition: all 0.3s ease-out; } .link_btn::before, .link_btn::after{ content: ""; box-sizing: border-box; border: 1px solid transparent; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all 0.3s ease-out; } .link_btn:hover{ background-color: transparent; color: #000; } .link_btn:hover::before, .link_btn:hover::after{ border-color: #000; } .link_btn:hover::before{ transform: translate(-5px, -5px) skewX(7deg) } .link_btn:hover::after{ transform: translate(5px, 5px) skewX(7deg) }

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

pictureタグで画像を出し分けてWebP非対応ブラウザ対策をする方法

pictureタグで画像を出し分けてWebP非対応ブラウザ対策をする方法

【PHP】foreachで配列の最初と最後を判定する

【PHP】foreachで配列の最初と最後を判定する

【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

【PHP】配列の要素の数を取得する

【PHP】配列の要素の数を取得する

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする