今回はCSSのボタンアニメーションについて解説します。
使いやすさを重視して実際によく実装するボタンを16種類選定しました。
コードを掲載し、内容の説明もしているので今すぐコピペして使用していただけます。
好きなデザインがあったらぜひ参考にしてみてください。
目次
ボタンアニメーションのデモ
今回紹介するボタンアニメーション全てを一気にこちらのデモで確認できます。
ホバーした際の挙動も確認してみてください。
共通コード
各ボタンの共通コードはこちらです。
<div class="button">
<a href="#" class="button-link">
<span class="button-text">ボタン</span>
</a>
</div>
.button {
width: 300px;
}
.button-link {
display: block;
text-align: center;
text-decoration: none;
color: #333;
transition: .3s;
}
.button-text {
font-size: 18px;
}
上記のコードを基本に、各アニメーションを作成していきましょう。
シンプルなボタン
シンプルで使いやすいボタンを4種類紹介します。
シンプルなボタンは4種類全てに共通してsimple-button
というクラスを付与しています。
.simple-button {
transform: .3s;
}
.simple-button:hover {
opacity: .6;
}
ホバーした際のアニメーションを透明度を60%にするクラスです。
一つずつホバーして挙動を確認してみてください。
四角
シンプルな四角のボタンです。
共通コードのaタグに.simple-square
を追加し独自のCSSを記述しています。
<div class="button">
<a href="#" class="button-link simple-button simple-square">
<span class="button-text">button</span>
</a>
</div>
.simple-square {
background-color: #eee;
padding: 20px 0;
}
枠線
シンプルな枠付きの四角のボタンです。
共通コードのaタグに.simple-outline
を追加し独自のCSSを記述しています。
<div class="button">
<a href="#" class="button-link simple-button simple-outline">
<span class="button-text">button</span>
</a>
</div>
.simple-outline {
border: 2px solid #333;
padding: 20px 0;
}
角丸
シンプルな角丸の四角のボタンです。
共通コードのaタグに.simple-border-radius
を追加し独自のCSSを記述しています。
<div class="button">
<a href="#" class="button-link simple-button simple-border-radius">
<span class="button-text">button</span>
</a>
</div>
.simple-border-radius {
border-radius: 16px;
padding: 20px 0;
background-color: #eee;
}
丸
シンプルな角丸の四角のボタンです。
共通コードのaタグに.simple-circle
を追加し独自のCSSを記述しています。
Webサイトの「TOPへ戻る」やスライダーの矢印などに使用しやすいです。
<div class="button">
<a href="#" class="button-link simple-button simple-circle">
<span class="button-text">button</span>
</a>
</div>
.simple-circle {
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
}
使いやすいボタン
シンプルで使いやすいアニメーションのボタンを5種類紹介します。
どのようにアニメーションするのか、ボタンにカーソルを当てて確認してみてください。
実際のコードも見ていきましょう。
文字色が変わる
文字の色が白から黄緑色に変わるボタンです。
シンプルですが、サイトのイメージカラーに合わせて背景色や文字色、ホバー時の文字色を変更することで様々な箇所で活用できます。
<div class="button">
<a href="#" class="button-link simple-text">
<span class="button-text">button</span>
</a>
</div>
.simple-text {
padding: 20px;
background-color: #333;
}
.simple-text:hover {
color: #e0e82e;
}
背景色が変わる
ホバーで背景色が変わるボタンです。
ホバーしたことがわかりやすいですね。
色を変える時は背景色と文字色のコントラストに注意しましょう。
<div class="button">
<a href="#" class="button-link simple-bg">
<span class="button-text">button</span>
</a>
</div>
.simple-bg {
padding: 20px;
background-color: #333;
}
.simple-bg:hover {
background-color: #e0e82e;
}
影
ホバーすると少し浮き出したように感じるボタンです。
ホバーした際の影の値を少し大きく、色を少し濃くすることで再現しています。
<div class="button">
<a href="#" class="button-link simple-shadow">
<span class="button-text">button</span>
</a>
</div>
.simple-shadow {
padding: 20px;
background-color: #fff;
color: #333;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.simple-shadow:hover {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}
大きくなる
ホバーするとボタンの大きさが少し大きくなるボタンです。
transform: scale()
を使用してホバー時に1.02倍に大きくしています。
背景色や文字色の変化と組み合わせると幅がより広がりますね。
<div class="button">
<a href="#" class="button-link simple-scale">
<span class="button-text">button</span>
</a>
</div>
.simple-scale {
padding: 20px;
background-color: #333;
}
.simple-scale:hover {
transform: scale(1.02);
}
文字間が広がる
ホバーで文字の間隔が広がるように設定してあります。
letter-spacing
を使用すると右側に同じ分の余白が入るため、相殺する為にtext-indent
で同じ値を指定しています。
<div class="button">
<a href="#" class="button-link simple-text-scale">
<span class="button-text">button</span>
</a>
</div>
.simple-text-scale {
padding: 20px;
background-color: #e0e82e;
color: #333;
}
.simple-text-scale:hover {
letter-spacing: 0.12em;
text-indent: 0.12em;
}
letter-spacing
の余白に関して、詳しくはこちらの記事をご覧ください。
![【CSS】letter-spacingで微妙にずれる?中央揃えにしたい時の...](https://retval.jp/site/wp-content/uploads/2024/02/letter-spacing-150x150.png)
【CSS】letter-spacingで微妙にずれる?中央揃えにしたい時の…
今回は文字を中央揃えにしたい時、letter-spacingを指定していると発生する微妙な「ずれ」に…
背景アニメーションボタン
ホバーしたら背景が変わるボタンを4種類紹介します。
背景が左から伸びる
ボタンに疑似要素で黄緑色の背景を作成し、ホバーしたら左から現れるように設定しました。
transition
をアレンジするだけでも雰囲気が変わり、いろんな活用方法がありそうです。
<div class="button">
<a href="#" class="button-link bg-extend-left">
<span class="button-text">button</span>
</a>
</div>
.bg-extend-left {
padding: 20px;
border: 2px solid #333;
color: #333;
overflow: hidden;
position: relative;
z-index: 1;
}
.bg-extend-left::before {
content: '';
width: 100%;
height: 100%;
background-color: #e0e82e;
position: absolute;
left: -100%;
top: 0;
transition: .4s;
z-index: -1;
}
.bg-extend-left:hover::before {
left: 0;
}
背景が上から伸びる
左から背景が現れるボタンと同じように上から背景が現れるように設定しました。
同様に右から、下からでも簡単に作成可能です。
ポイントは.bg-extend-top
にoverflow:hidden
を設定し、疑似要素はボタンの枠外(-100%の位置)からホバーで100%になるように指定することです。
<div class="button">
<a href="#" class="button-link bg-extend-top">
<span class="button-text">button</span>
</a>
</div>
.bg-extend-top {
padding: 20px;
border: 2px solid #333;
color: #333;
overflow: hidden;
position: relative;
z-index: 1;
}
.bg-extend-top::before {
content: '';
width: 100%;
height: 100%;
background-color: #e0e82e;
position: absolute;
left: 0;
top: -100%;
transition: .4s;
z-index: -1;
}
.bg-extend-top:hover::before {
top: 0;
}
背景が通り過ぎる
背景が現れるボタンを応用して背景が通り過ぎるボタンを作成しました。
通り過ぎる表現は、疑似要素をleft: -100%;
からホバーでleft:100%;
に設定し、アニメーション開始前後は枠外に配置するようにしました。
移動の幅が広くなるため、transition: .8s;
と少し変化の速さを遅くすることでアニメーションの雰囲気を統一しました。
<div class="button">
<a href="#" class="button-link bg-throungh">
<span class="button-text">button</span>
</a>
</div>
.bg-throungh {
padding: 20px;
border: 2px solid #333;
color: #333;
overflow: hidden;
position: relative;
z-index: 1;
}
.bg-throungh::before {
content: '';
width: 100%;
height: 100%;
background-color: #e0e82e;
position: absolute;
left: -100%;
top: 0;
transition: .8s;
z-index: -1;
}
.bg-throungh:hover::before {
left: 100%;
}
矢印が伸びる
矢印アイコンの背景がボタン全体に伸びるデザインです。
親要素にoverflow: hidden;
を指定し、疑似要素をホバー時にwidth: 100%;
にすることで実現しています。
<div class="button">
<a href="#" class="button-link arrow-extend">
<span class="button-text">button</span>
</a>
</div>
.arrow-extend {
padding: 20px;
color: #333;
overflow: hidden;
position: relative;
z-index: 1;
}
.arrow-extend::before {
content: '';
width: 60px;
height: 60px;
background-color: #e0e82e;
border-radius: 100px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: .4s;
z-index: -1;
}
.arrow-extend::after {
content: '';
width: 8px;
height: 8px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
.arrow-extend:hover::before {
width: 100%;
}
立体アニメーションボタン
立体的なアニメーションボタンを3種類ご紹介します。
ボタン1
ホバーをするとボタンを押したようにアニメーションします。
疑似要素で影を作成し、ホバーの時にボタンを下(y軸方向)に4px下げることでボタンを押したようなアニメーションを再現しています。
<div class="button button-push">
<a href="#" class="button-link">
<span class="button-text">button</span>
</a>
</div>
.button-push .button-link {
background-color: #e0e82e;
color: #333;
padding: 20px;
}
.button-push:after {
content: '';
display: block;
width: 100%;
height: 6px;
background-color: #afb626;
transition: .3s;
}
.button-push .button-link:hover {
transform: translateY(4px);
}
ボタン2
ボタンが左上から押されたような挙動をするボタンです。
ボタン1と同様に、ホバー時のボタンの位置をずらすことでボタンを押したようなアニメーションにしています。
<div class="button button-push-left">
<a href="#" class="button-link">
<span class="button-text">button</span>
</a>
</div>
.button-push-left {
position: relative;
}
.button-push-left .button-link {
background-color: #e0e82e;
color: #333;
padding: 20px;
position: relative;
top: -6px;
left: -6px;
}
.button-push-left:after {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: #afb626;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
transition: .3s;
}
.button-push-left .button-link:hover {
top: -2px;
left: -2px;
}
立方体
立方体が回転するボタンです。
他のボタンと比べると作成の難易度が上がります。
今回全てを解説すると煩雑になるため、簡単に特徴を紹介します。
特徴的な箇所はtransform-style: preserve-3d;
です。
子要素を使って3Dの表現をする際に指定します。
ホバーして正面に現れる要素は、ホバーしていない時に横軸(x軸)方向へ90度回転しています。
ユーザーは正面から見ているのでホバーの面は上方向にあり、見えない状態からスタートします。
ホバーした時は正面にあった面が横軸(x軸)方向へ90度回転し、正面から見て下方向に移動するため、立方体のように見えるようになっています。
また、回転軸はtransform-origin: center center -33px;
で表されています。
.button-text
、.button-text--hover
に同じ回転軸を指定することで自然に回転しているように表現しています。
<div class="button button-cube">
<a href="#" class="button-link">
<span class="button-text">button</span>
<span class="button-text--hover">hover</span>
</a>
</div>
.button-cube {
height: 67px;
}
.button-cube .button-link {
transform-style: preserve-3d;
perspective: 300px;
height: 100%;
position: relative;
}
.button-cube .button-link span {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: .3s;
}
.button-cube .button-link .button-text {
background-color: #e0e82e;
color: #333;
transform-origin: center center -33px;
transition: .3s;
}
.button-cube .button-link .button-text--hover {
transform: rotateX(-90deg);
transform-origin: center center -33px;
background-color: #333;
color: #e0e82e;
transition: .3s;
}
.button-cube .button-link:hover .button-text {
transform: rotateX(90deg);
}
.button-cube .button-link:hover .button-text--hover {
transform: rotateX(0deg);
}
まとめ
今回はCSSのボタンアニメーションについて解説しました。
お好きなデザインのボタンはありましたでしょうか?
どのようなHPにも契約や予約・購入につながるボタンが設置されていると思いますので、目的に合ったボタンを作成する際に活用していただけたら幸いです。
わからない部分がありましたらお気軽にお問い合わせください。
その他の記事
![【CSS】点線を作成しよう!自由に間隔を指定する方法も紹介し...](https://retval.jp/site/wp-content/uploads/2024/04/css-border-background-150x150.png)
【CSS】点線を作成しよう!自由に間隔を指定する方法も紹介し…
今回はCSSで点線を作成する方法について解説します。この方法を知ることで、簡単に点線を作成することが…
![【CSS】トリミングできる!object-fitの使い方と配置について](https://retval.jp/site/wp-content/uploads/2024/04/object-fit-150x150.png)
【CSS】トリミングできる!object-fitの使い方と配置について
今回はCSSのobject-fitの使い方について解説します。この方法を知ることで、画像やビデオをデ…
![【HMTL/CSS】overflow: scrollのスクロールバーをカスタマイ...](https://retval.jp/site/wp-content/uploads/2024/02/overflow-scroll-150x150.png)
【HMTL/CSS】overflow: scrollのスクロールバーをカスタマイ…
今回はHMTLとCSSでoverflow: scrollのスクロールバーをカスタマイズする方法につい…