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

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

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

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

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

 

1. ボタンが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後に現れる文字と背景)の位置を指定 */
}
ここがポイント!
  1. transformプロパティのtranslateを指定して移動距離を調整
  2. 移動距離を5px程に抑えるとWebサイトやWebアプリなどで使い勝手がいい
  3. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

 

2. ボタンを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後に現れる文字と背景)の位置を指定 */
}
ここがポイント!
  1. transformプロパティのrotateを指定して回転角度を調整
  2. 回転角度を180deg以上に指定するとクルクル回るアニメーションになり、5~10px程に抑えると洗練されたボタンになる
  3. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

 

3. ボタンを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後に現れる文字と背景)の位置を指定 */
}
ここがポイント!
  1. transformプロパティのscaleを指定して伸縮率を調整
  2. scaleで拡大させることは強調させる効果が大きく、画像へのエフェクトでもかなり応用が効く
  3. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

 

4. ボタンを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後に現れる文字と背景)の位置を指定 */
}
ここがポイント!
  1. transformプロパティのskewを指定して傾斜角度を調整
  2. skewでの傾きを最小限にとどめることで違和感のないデザインに仕上げられる
  3. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

【初心者向け】失敗しないプログラミングTIPS

そもそもWebデザインの基礎がわからない。。
そんなあなたには『Udemy』

ふたご


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

ふたご

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

   話だけ聞いてみる