【CSS】ボタンアニメーション16種類！コピペで今すぐ使える！

今回はCSSのボタンアニメーションについて解説します。

使いやすさを重視して実際によく実装するボタンを16種類選定しました。

コードを掲載し、内容の説明もしているので今すぐコピペして使用していただけます。

好きなデザインがあったらぜひ参考にしてみてください。

ボタンアニメーションのデモ

今回紹介するボタンアニメーション全てを一気にこちらのデモで確認できます。

ホバーした際の挙動も確認してみてください。

共通コード

各ボタンの共通コードはこちらです。

HTML

<div class="button">
  <a href="#" class="button-link">
    <span class="button-text">ボタン</span>
  </a>
</div>

CSS

.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というクラスを付与しています。

CSS

.simple-button {
  transform: .3s;
}

.simple-button:hover {
  opacity: .6;
}

ホバーした際のアニメーションを透明度を60％にするクラスです。

一つずつホバーして挙動を確認してみてください。

四角

button

シンプルな四角のボタンです。

共通コードのaタグに.simple-squareを追加し独自のCSSを記述しています。

HTML

<div class="button">
  <a href="#" class="button-link simple-button simple-square">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.simple-square {
  background-color: #eee;
  padding: 20px 0;
}

枠線

button

シンプルな枠付きの四角のボタンです。

共通コードのaタグに.simple-outlineを追加し独自のCSSを記述しています。

HTML

<div class="button">
  <a href="#" class="button-link simple-button simple-outline">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.simple-outline {
  border: 2px solid #333;
  padding: 20px 0;
}

角丸

button

シンプルな角丸の四角のボタンです。

共通コードのaタグに.simple-border-radiusを追加し独自のCSSを記述しています。

HTML

<div class="button">
  <a href="#" class="button-link simple-button simple-border-radius">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.simple-border-radius {
  border-radius: 16px;
  padding: 20px 0;
  background-color: #eee;
}

丸

button

シンプルな角丸の四角のボタンです。

共通コードのaタグに.simple-circleを追加し独自のCSSを記述しています。

Webサイトの「TOPへ戻る」やスライダーの矢印などに使用しやすいです。

HTML

<div class="button">
  <a href="#" class="button-link simple-button simple-circle">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.simple-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
}

使いやすいボタン

シンプルで使いやすいアニメーションのボタンを5種類紹介します。

どのようにアニメーションするのか、ボタンにカーソルを当てて確認してみてください。

実際のコードも見ていきましょう。

文字色が変わる

button

文字の色が白から黄緑色に変わるボタンです。

シンプルですが、サイトのイメージカラーに合わせて背景色や文字色、ホバー時の文字色を変更することで様々な箇所で活用できます。

HTML

<div class="button">
  <a href="#" class="button-link simple-text">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.simple-text {
  padding: 20px;
  background-color: #333;
}

.simple-text:hover {
  color: #e0e82e;
}

背景色が変わる

button

ホバーで背景色が変わるボタンです。

ホバーしたことがわかりやすいですね。

色を変える時は背景色と文字色のコントラストに注意しましょう。

HTML

<div class="button">
  <a href="#" class="button-link simple-bg">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.simple-bg {
  padding: 20px;
  background-color: #333;
}

.simple-bg:hover {
  background-color: #e0e82e;
}

影

button

ホバーすると少し浮き出したように感じるボタンです。

ホバーした際の影の値を少し大きく、色を少し濃くすることで再現しています。

HTML

<div class="button">
  <a href="#" class="button-link simple-shadow">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.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);
}

大きくなる

button

ホバーするとボタンの大きさが少し大きくなるボタンです。

transform: scale()を使用してホバー時に1.02倍に大きくしています。

背景色や文字色の変化と組み合わせると幅がより広がりますね。

HTML

<div class="button">
  <a href="#" class="button-link simple-scale">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.simple-scale {
  padding: 20px;
  background-color: #333;
}

.simple-scale:hover {
  transform: scale(1.02);
}

文字間が広がる

button

ホバーで文字の間隔が広がるように設定してあります。

letter-spacingを使用すると右側に同じ分の余白が入るため、相殺する為にtext-indentで同じ値を指定しています。

HTML

<div class="button">
  <a href="#" class="button-link simple-text-scale">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.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で微妙にずれる？中央揃えにしたい時の…

今回は文字を中央揃えにしたい時、letter-spacingを指定していると発生する微妙な「ずれ」に…

背景アニメーションボタン

ホバーしたら背景が変わるボタンを4種類紹介します。

背景が左から伸びる

button

ボタンに疑似要素で黄緑色の背景を作成し、ホバーしたら左から現れるように設定しました。

transitionをアレンジするだけでも雰囲気が変わり、いろんな活用方法がありそうです。

HTML

<div class="button">
  <a href="#" class="button-link bg-extend-left">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.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;
}

背景が上から伸びる

button

左から背景が現れるボタンと同じように上から背景が現れるように設定しました。

同様に右から、下からでも簡単に作成可能です。

ポイントは.bg-extend-topにoverflow:hiddenを設定し、疑似要素はボタンの枠外（-100%の位置）からホバーで100%になるように指定することです。

HTML

<div class="button">
  <a href="#" class="button-link bg-extend-top">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.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;
}

背景が通り過ぎる

button

背景が現れるボタンを応用して背景が通り過ぎるボタンを作成しました。

通り過ぎる表現は、疑似要素をleft: -100%;からホバーでleft:100%;に設定し、アニメーション開始前後は枠外に配置するようにしました。

移動の幅が広くなるため、transition: .8s;と少し変化の速さを遅くすることでアニメーションの雰囲気を統一しました。

HTML

<div class="button">
  <a href="#" class="button-link bg-throungh">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.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%;
}

矢印が伸びる

button

矢印アイコンの背景がボタン全体に伸びるデザインです。

親要素にoverflow: hidden;を指定し、疑似要素をホバー時にwidth: 100%;にすることで実現しています。

HTML

<div class="button">
  <a href="#" class="button-link arrow-extend">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.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

button

ホバーをするとボタンを押したようにアニメーションします。

疑似要素で影を作成し、ホバーの時にボタンを下（y軸方向）に4px下げることでボタンを押したようなアニメーションを再現しています。

HTML

<div class="button button-push">
  <a href="#" class="button-link">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.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

button

ボタンが左上から押されたような挙動をするボタンです。

ボタン1と同様に、ホバー時のボタンの位置をずらすことでボタンを押したようなアニメーションにしています。

HTML

<div class="button button-push-left">
  <a href="#" class="button-link">
    <span class="button-text">button</span>
  </a>
</div>

CSS

.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;
}

立方体

button hover

立方体が回転するボタンです。

他のボタンと比べると作成の難易度が上がります。

今回全てを解説すると煩雑になるため、簡単に特徴を紹介します。

特徴的な箇所はtransform-style: preserve-3d;です。

子要素を使って3Dの表現をする際に指定します。

ホバーして正面に現れる要素は、ホバーしていない時に横軸（x軸）方向へ90度回転しています。

ユーザーは正面から見ているのでホバーの面は上方向にあり、見えない状態からスタートします。

ホバーした時は正面にあった面が横軸（x軸）方向へ90度回転し、正面から見て下方向に移動するため、立方体のように見えるようになっています。

また、回転軸はtransform-origin: center center -33px;で表されています。

.button-text、.button-text--hoverに同じ回転軸を指定することで自然に回転しているように表現しています。

HTML

<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>

CSS

.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);
}