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

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

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

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

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

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

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

【筆者実証済】Webデザイナー3ヶ月独学ロードマップ『未経験から月10万稼ぐ手順5ステップ』

 

 

1. ボタンで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後に現れる文字と背景)の位置を指定 */
}
ここがポイント!
  1. box-shadowでボタンに内と外の影を使い分け
  2. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
  3. position: absoluteで親要素との絶対的な位置を指定したことで影を自然な位置に固定

 

2. ボタンで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後に現れる文字と背景)の位置を指定 */
}
ここがポイント!
  1. box-shadowでボタンに内と外の影を使い分け
  2. border-radiusでボックスの角に丸みをつけて緩急のあるボタンを実現
  3. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
  4. position: absoluteで親要素との絶対的な位置を指定したことで影を自然な位置に固定

 

3. ボタンの背景色がゆっくりと現れる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後に現れる文字と背景)の位置を指定 */
}
ここがポイント!
  1. border-radiusでボックスの角に丸みをつけてかわいらしいボタンを実現
  2. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
  3. position: absoluteで親要素との絶対的な位置を指定したことで影を自然な位置に固定

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習&サポートが無料!
  2. 誰もが知っている超優良企業への就職サポート付き!
  3. 学習言語:Java、PHP、HTML、CSSなど

 

   話だけ聞いてみる