hover×transitionのCSSボタンエフェクト9選【コピペOK】

※当サイトには一部宣伝が含まれます。

今回はtransitionを使ってボタンにアニメーションを効かせてWebサイトやWebアプリケーションで使えるボタンエフェクトを実装してみました。

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもカッコよくできているのでそのまま使っていただけると思います。

htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

Webデザイン・コーディングを学習すると「WebデザイナーとしてWeb制作案件を受注する」というやり方で月10万円以上稼げたりします。

もし興味のある方は、下の記事がかなり再現性のあるロードマップなので是非ご覧ください。

【挫折した人へ】本物のWebデザイナー独学ロードマップ｜Web制作で稼ぐ

この記事の目次

transitionでボタンにアニメーションをつける方法３選

ボタンでbox-shadowとradiusをミックスした洗練されたhoverアニメーション
ボタンでbox-shadowを使いこなした立体感あふれるhoverアニメーション
ボタンの背景色がゆっくりと現れるhoverアニメーション

１. ボタンでbox-shadowを使いこなした立体感あふれるhoverアニメーション

動きは下の画像のような感じになります

実際の動きはこちらです

コードはこちら

コードを見る

<div class="container">
  <div class="bg-btn">
    <div class="btn button1">
      <div class="fonts">
        <h1>drop shadow</h1>
      </div>
    </div>
    <div class="btn button2">
      <div class="fonts">
        <h1>inner shadow</h1>
      </div>
    </div>
    <div class="btn button3">
      <div class="fonts">
        <h1>both shadow</h1>
      </div>
    </div>
  </div>
</div>

.container {
  width  : 100%;
  margin-top: 30px;
}
.bg-btn {
  width  : 250px;
  height : 70px;
  margin: 0 auto;
  background-color: white;
  cursor : pointer;
}
.button1 {
  margin: 25px 0;
  border-radius: 8px;
  /* ボックスの角につける丸みの強さを指定 */
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: dimgray;
  transition-duration:1.0s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: hue-rotate(0deg) opacity(60%) saturate(100%);
  /* hover前：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
}
.button1:hover {
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  filter: hue-rotate(500deg) opacity(100%) saturate(130%);
  /* hover後：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
}
.button2 {
  margin: 25px 0;
  border-radius: 8px;
  /* ボックスの角につける丸みの強さを指定 */
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: dimgray;
  transition-duration:1.0s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: hue-rotate(0deg) opacity(60%) saturate(100%);
  /* hover前：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) inset;
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、広がりの長さ、色、内側に影をつけるサイン） */
}
.button2:hover {
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.6) inset;
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、広がりの長さ、色、内側に影をつけるサイン） */
  filter: hue-rotate(500deg) opacity(100%) saturate(130%);
  /* hover後：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
}
.button3 {
  margin: 25px 0;
  border-radius: 8px;
  /* ボックスの角につける丸みの強さを指定 */
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: dimgray;
  transition-duration:1.0s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: hue-rotate(0deg) opacity(60%) saturate(100%);
  /* hover前：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
  box-shadow: 5px 5px 5px rgba(0,0,0,1), 0px 0px 0px 0px rgba(0,0,0,0) inset;
  /* ボックスに影を内と外の両方につける場合は「,」カンマで区切る */
}
.button3:hover {
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0), 2px 2px 3px 3px rgba(0,0,0,0.6) inset;
  /* ボックスに影を内と外の両方につける場合は「,」カンマで区切る */
  filter: hue-rotate(500deg) opacity(100%) saturate(130%);
  /* hover後：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
}
.fonts {
  width            : 250px;
  height           : 70px;
  padding          : 10px 0;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  opacity : 1;
  transition : opacity .8s;
  /* hover後カーソルを外した際に文字と背景が消える時間を指定 */
}
.fonts h1 {
  font-size: 24px;
  margin: 13px 0;
}
.btn .fonts {
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}

ここがポイント！

box-shadowでボタンに内と外の影を使い分け
transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
position: absoluteで親要素との絶対的な位置を指定したことで影を自然な位置に固定

２. ボタンでbox-shadowとradiusをミックスした洗練されたhoverアニメーション

動きは下の画像のような感じになります

実際の動きはこちらです

コードはこちら

コードを見る

<div class="container">
  <div class="bg-btn">
    <div class="btn button1">
      <div class="fonts">
        <h1>drop shadow & radius</h1>
      </div>
    </div>
    <div class="btn button2">
      <div class="fonts">
        <h1>inner shadow & radius</h1>
      </div>
    </div>
    <div class="btn button3">
      <div class="fonts">
        <h1>both shadow & radius</h1>
      </div>
    </div>
  </div>
</div>

.container {
  width  : 100%;
  margin-top: 30px;
}
.bg-btn {
  width  : 300px;
  height : 70px;
  margin: 0 auto;
  background-color: white;
  cursor : pointer;
}
.button1 {
  margin: 25px 0;
  border-radius: 0px;
  /* ボックスの角につける丸みの強さを指定 */
  width  : 320px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: navy;
  transition-duration:1.0s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: hue-rotate(0deg) opacity(60%) saturate(100%);
  /* hover前：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
}
.button1:hover {
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  border-radius: 50px;
  /* ボックスの角につける丸みの強さを指定 */
  filter: hue-rotate(500deg) opacity(100%) saturate(130%);
  /* hover後：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
}
.button2 {
  margin: 25px 0;
  border-radius: 20px;
  /* ボックスの角につける丸みの強さを指定 */
  width  : 320px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: navy;
  transition-duration:1.0s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: hue-rotate(0deg) opacity(60%) saturate(100%);
  /* hover前：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) inset;
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色、内側に影をつけるサイン） */
}
.button2:hover {
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.6) inset;
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色、内側に影をつけるサイン） */
  border-radius: 50px;
  /* ボックスの角につける丸みの強さを指定 */
  filter: hue-rotate(500deg) opacity(100%) saturate(130%);
  /* hover後：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
}
.button3 {
  margin: 25px 0;
  border-radius: 50px;
  /* ボックスの角につける丸みの強さを指定 */
  width  : 320px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: navy;
  transition-duration:1.0s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: hue-rotate(0deg) opacity(60%) saturate(100%);
  /* hover前：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
  box-shadow: 5px 5px 5px rgba(0,0,0,1), 0px 0px 0px 0px rgba(0,0,0,0) inset;
  /* ボックスに影を内と外の両方につける場合は「,」カンマで区切る */
}
.button3:hover {
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0), 2px 2px 3px 3px rgba(0,0,0,0.6) inset;
  /* ボックスに影を内と外の両方につける場合は「,」カンマで区切る */
  border-radius: 0px;
  /* ボックスの角につける丸みの強さを指定 */
  filter: hue-rotate(500deg) opacity(100%) saturate(130%);
  /* hover後：filterプロパティの「色相回転」＋「透明」＋「彩度」 */
}
.fonts {
  width            : 300px;
  height           : 70px;
  padding          : 10px 0px 10px 10px;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  opacity : 1;
  transition : opacity .8s;
  /* hover後カーソルを外した際に文字と背景が消える時間を指定 */
}
.fonts h1 {
  font-size: 20px;
  margin: 15px 0;
}
.btn .fonts {
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}

ここがポイント！

box-shadowでボタンに内と外の影を使い分け
border-radiusでボックスの角に丸みをつけて緩急のあるボタンを実現
transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
position: absoluteで親要素との絶対的な位置を指定したことで影を自然な位置に固定

３. ボタンの背景色がゆっくりと現れるhoverアニメーション

動きは下の画像のような感じになります

実際の動きはこちらです

コードはこちら

コードを見る

<div class="container">
  <div class="bg-btn">
    <div class="btn button1">
      <div class="fonts">
        <h1>Pink</h1>
      </div>
    </div>
    <div class="btn button2">
      <div class="fonts">
        <h1>Green</h1>
      </div>
    </div>
    <div class="btn button3">
      <div class="fonts">
        <h1>Blue</h1>
      </div>
    </div>
  </div>
</div>

.container {
  width  : 100%;
  margin-top: 0px;
}
.bg-btn {
  width  : 250px;
  height : 70px;
  margin: 0 auto;
  background-color: white;
  cursor : pointer;
}
.button1 {
  margin: 25px 0;
  border-radius: 50px;
  /* ボックスの角につける丸みの強さを指定 */
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  transition-duration:1.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  border-bottom: 1px solid pink;
  border-top: 1px solid pink;
  background-color: white;
}
.button1:hover {
  /* hover後のエフェクト */
  background-color: pink;
  border: 1px solid pink;
}
.button2 {
  margin: 25px 0;
  border-radius: 50px;
  /* ボックスの角につける丸みの強さを指定 */
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  transition-duration:1.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  border-bottom: 1px solid palegreen;
  border-top: 1px solid palegreen;
  background-color: white;
}
.button2:hover {
  background-color: palegreen;
  border: 1px solid palegreen;
}
.button3 {
  margin: 25px 0;
  border-radius: 50px;
  /* ボックスの角につける丸みの強さを指定 */
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  transition-duration:1.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  border-bottom: 1px solid skyblue;
  border-top: 1px solid skyblue;
  background-color: white;
}
.button3:hover {
  background-color: skyblue;
  border: 1px solid skyblue;
}
.btn:hover .fonts h1 {
  color: white;
}
.fonts {
  width            : 250px;
  height           : 70px;
  padding          : 10px 0;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  opacity : 1;
  transition : opacity .8s;
  /* hover後カーソルを外した際に文字と背景が消える時間を指定 */
}
.fonts h1 {
  font-size: 28px;
  margin: 10px 0;
  color: #888888;
  transition-duration:2.5s;
  /* アニメーションの開始から終了までの時間を指定 */
}
.btn .fonts {
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}

ここがポイント！