【hover×transform完全網羅】CSSボタンアニメーション16選

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

今回は全てのtransformを使ってボタンにあらゆる変形エフェクトを効かせてtransitionで滑らかなアニメーションを実装してみました。

transform: translate、rotate、scale、skewの4種類をアニメーションで使用しているので「トランスフォームエフェクト」を完全に網羅できます。htmlとcssのみ使っています。

この記事の信頼性（筆者はこんな人）

現役Webデザイナーが執筆
継続して月収80万円超のフリーランス
完全未経験から独学でWeb制作スキルを習得
Twitterフォロワー数1,700人超（→@twinzvlog_yk）
Web制作の無料メンター経験多数
認定ランサー（ランサーズ最高ランク）

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

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

１. ボタンがtranslateで生き物みたいに動くhoverアニメーション

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

実際の動きはこちらです

コードはこちら

コードを見る

<div class="container">
  <div class="bg-btn">
    <div class="btn button1">
      <div class="fonts">
        <h1>translateX</h1>
      </div>
    </div>
    <div class="btn button2">
      <div class="fonts">
        <h1>translateY</h1>
      </div>
    </div>
    <div class="btn button3">
      <div class="fonts">
        <h1>translateXY</h1>
      </div>
    </div>
    <div class="btn button4">
      <div class="fonts">
        <h1>translate3d</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: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: translateX(0px);
  /* X軸(横)方向への移動距離を指定 */
}
.button1:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: translateX(15px);
  /* X軸(横)方向への移動距離を指定 */
}
.button2 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: translateY(0px);
  /* Y軸(縦)方向への移動距離を指定 */
}
.button2:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: translateY(15px);
  /* Y軸(縦)方向への移動距離を指定 */
}
.button3 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: translate(0px, 0px);
  /* XY軸(横縦)方向への移動距離を指定 */
}
.button3:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: translate(15px, 15px);
  /* XY軸(横縦)方向への移動距離を指定 */
}
.button4 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: translate3d(0px, 0px, 0px);
  /* XYZ軸(3D)方向への移動距離を指定 */
}
.button4:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: translate3d(-15px, -15px, -15px);
  /* XYZ軸(3D)方向への移動距離を指定 */
}
.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;
}
.btn .fonts {
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}

ここがポイント！

transformプロパティのtranslateを指定して移動距離を調整
移動距離を5px程に抑えるとWebサイトやWebアプリなどで使い勝手がいい
transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

２. ボタンをrotateで自由自在に回転させるhoverアニメーション

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

実際の動きはこちらです

コードはこちら

コードを見る

<div class="container">
  <div class="bg-btn">
    <div class="btn button5">
      <div class="fonts">
        <h1>rotate</h1>
      </div>
    </div>
    <div class="btn button6">
      <div class="fonts">
        <h1>rotateX</h1>
      </div>
    </div>
    <div class="btn button7">
      <div class="fonts">
        <h1>rotateY</h1>
      </div>
    </div>
    <div class="btn button8">
      <div class="fonts">
        <h1>rotateXY</h1>
      </div>
    </div>
    <div class="btn button9">
      <div class="fonts">
        <h1>rotate3d</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;
}
.button5 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: rotate(0deg);
  /* Z(平面)の回転角度を指定 */
}
.button5:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: rotate(-3deg);
  /* Z(平面)の回転角度を指定 */
}
.button6 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: rotateX(0deg);
  /* X(縦)の回転角度を指定 */
}
.button6:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: rotateX(30deg);
  /* X(縦)の回転角度を指定 */
}
.button7 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: rotateY(0deg);
  /* Y(横)の回転角度を指定 */
}
.button7:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: rotateY(30deg);
  /* Y(横)の回転角度を指定 */
}
.button8 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: rotateX(0deg) rotateY(0deg);
  /* XY(縦横)の回転角度を指定 */
}
.button8:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: rotateX(15deg) rotateY(-15deg);
  /* XY(縦横)の回転角度を指定 */
}
.button9 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: rotate3d(0,0,0,0deg);
  /* XYZ(3D)の回転角度を指定 */
}
.button9:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: rotate3d(1,1,1,10deg);
  /* XYZ(3D)の回転角度を指定 */
}
.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;
}
.btn .fonts {
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}

ここがポイント！

transformプロパティのrotateを指定して回転角度を調整
回転角度を180deg以上に指定するとクルクル回るアニメーションになり、5~10px程に抑えると洗練されたボタンになる
transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

３. ボタンをscaleで拡大縮小させる超使えるhoverアニメーション

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

実際の動きはこちらです

コードはこちら

コードを見る

<div class="container">
  <div class="bg-btn">
    <div class="btn button10">
      <div class="fonts">
        <h1>scaleX</h1>
      </div>
    </div>
    <div class="btn button11">
      <div class="fonts">
        <h1>scaleY</h1>
      </div>
    </div>
    <div class="btn button12">
      <div class="fonts">
        <h1>scaleXY</h1>
      </div>
    </div>
    <div class="btn button13">
      <div class="fonts">
        <h1>scale3d</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;
}
.button10 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: scaleX(1);
  /* X軸(横)の伸縮率を指定 */
}
.button10:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: scaleX(1.1);
  /* X軸(横)の伸縮率を指定 */
}
.button11 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: scaleY(1);
  /* Y軸(縦)の伸縮率を指定 */
}
.button11:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform: scaleY(1.1);
  /* Y軸(縦)の伸縮率を指定 */
}
.button12 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform:translateX(0px);
  /* X軸(横)方向への移動距離を指定 */
  transform: scale(1,1);
  /* XY軸(横縦)の伸縮率を指定 */
}
.button12:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform:translateX(20px);
  /* X軸(横)方向への移動距離を指定 */
  transform: scale(1.1,1.1);
  /* XY軸(横縦)の伸縮率を指定 */
}
.button13 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform:translateX(0px);
  /* X軸(横)方向への移動距離を指定 */
  transform: scale3d(1,1,1);
  /* XYZ軸(3D)の伸縮率を指定 */
}
.button13:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform:translateX(20px);
  /* X軸(横)方向への移動距離を指定 */
  transform: scale3d(1.3,1.3,1.13);
  /* XYZ軸(3D)の伸縮率を指定 */
}
.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;
}
.btn .fonts {
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}

ここがポイント！

transformプロパティのscaleを指定して伸縮率を調整
scaleで拡大させることは強調させる効果が大きく、画像へのエフェクトでもかなり応用が効く
transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

４. ボタンをskewで斜めにウネウネ動かすhoverアニメーション

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

実際の動きはこちらです

コードはこちら

コードを見る

<div class="container">
  <div class="bg-btn">
    <div class="btn button14">
      <div class="fonts">
        <h1>skewX</h1>
      </div>
    </div>
    <div class="btn button15">
      <div class="fonts">
        <h1>skewY</h1>
      </div>
    </div>
    <div class="btn button16">
      <div class="fonts">
        <h1>skewXY</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;
}
.button14 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform:skewX(0deg);
  /* X軸(横)の傾斜角度を指定 */
}
.button14:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform:skewX(30deg);
  /* X軸(横)の傾斜角度を指定 */
}
.button15 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform:skewY(0deg);
  /* Y軸(縦)の傾斜角度を指定 */
}
.button15:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform:skewY(2deg);
  /* Y軸(縦)の傾斜角度を指定 */
}
.button16 {
  margin: 30px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform:skew(0deg,0deg);
  /* XY軸(横縦)の傾斜角度を指定 */
}
.button16:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色） */
  transform:skew(-10deg,-5deg);
  /* XY軸(横縦)の傾斜角度を指定 */
}
.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;
}
.btn .fonts {
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}

ここがポイント！