【マテリアルデザイン】hover×transformのCSSボタンアニメーション5つ【コード解説付】

今回はtransformとbox-shadowを使ってそのまま使用できるボタンのマテリアルデザインをあらゆる変形エフェクトを効かせてtransitionで滑らかなアニメーションで実装してみました。

マテリアルデザインなのでそのまますぐにでもコピペして使用できるように仕上げました

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

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

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

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

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

1. ボタンが拡大しながら浮かび上がるhoverアニメーション

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

コードを見る
<div class="container">
  <div class="bg-btn">
    <div class="btn button1">
      <div class="fonts">
        <h1>scale</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: 40px 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) scaleX(1,1);
  /* Y軸(タテ)方向への移動距離と伸縮率を指定 */
}
.button1:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色) */
  transform: translateY(-15px) scale(1.05,1.05);
  /* Y軸(タテ)方向への移動距離と伸縮率を指定 */
}
.fonts {
  width            : 250px;
  height           : 70px;
  padding          : 10px 0;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}
.fonts h1 {
  font-size: 28px;
  margin: 10px 0;
}
ここがポイント!
  1. transformプロパティのtranslateを指定して上方向への移動距離を調整
  2. transformプロパティのscaleを指定して伸縮率を調整
  3. 移動距離と伸縮率を最小限に指定することでそのままに使えるマテリアルデザインに仕上げた
  4. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

 

2. 現実のボタンのように凹むhoverアニメーション

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

コードを見る
<div class="container">
  <div class="bg-btn">
    <div class="btn button2">
      <div class="fonts">
        <h1>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;
}
.button2 {
  margin: 40px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: limegreen;
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) inset;
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、広がりの長さ、色、インナーシャドーのサイン) */
  transform: scale(1,1);
  /* XY軸(横縦)の伸縮率を指定 */
}
.button2:hover {
  box-shadow: 2px 2px 3px 3px rgba(0,100,0,1) inset;
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、広がりの長さ、色、インナーシャドーのサイン) */
  transform: scale(1.05,1.05);
  /* XY軸(横縦)の伸縮率を指定 */
}
.fonts {
  width            : 250px;
  height           : 70px;
  padding          : 10px 0;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}
.fonts h1 {
  font-size: 28px;
  margin: 10px 0;
}
ここがポイント!
  1. transformプロパティのscaleを指定して伸縮率を調整
  2. 伸縮率を最小限に指定しbox-shadowでボタンの内側に影を作り今すぐにでも使えるマテリアルデザインに仕上げた
  3. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

 

3. ボタンがゲームキャラのようにかわいく動くhoverアニメーション

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

コードを見る
<div class="container">
  <div class="bg-btn">
    <div class="btn button3">
      <div class="fonts">
        <h1>cute</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;
}
.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: rotateY(0deg) scaleX(1);
  /* XY(横タテ)の回転角度と伸縮率を指定 */
}
.button3:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色) */
  transform: rotateY(30deg) scaleX(1.2);
  /* XY(横タテ)の回転角度と伸縮率を指定 */
}
.fonts {
  width            : 250px;
  height           : 70px;
  padding          : 10px 0;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}
.fonts h1 {
  font-size: 28px;
  margin: 10px 0;
}
ここがポイント!
  1. transformプロパティのrotateを指定して回転角度を調整
  2. transformプロパティのscaleを指定して伸縮率を調整
  3. rotateとscaleを組み合わせることでスーパーマリオがジャンプするアニメーションのようなボタンの動きを実現
  4. 回転率と伸縮率を最小限に指定しすぐにでも使えるマテリアルデザインに仕上げた
  5. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

 

4. ボタンが超3Dに動き出すhoverアニメーション

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

コードを見る
<div class="container">
  <div class="bg-btn">
    <div class="btn button4">
      <div class="fonts">
        <h1>3D button</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;
}
.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: rotateY(0deg) scaleX(1);
  /* XY(横タテ)の回転角度と伸縮率を指定 */
}
.button3:hover {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色) */
  transform: rotateY(30deg) scaleX(1.2);
  /* XY(横タテ)の回転角度と伸縮率を指定 */
}
.fonts {
  width            : 250px;
  height           : 70px;
  padding          : 10px 0;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}
.fonts h1 {
  font-size: 28px;
  margin: 10px 0;
}
ここがポイント!
  1. transformプロパティのrotateを指定して回転角度を調整
  2. transformプロパティのscaleを指定して伸縮率を調整
  3. rotateとscaleを組み合わせて敢えて大きな値を指定することでリアルな3Dアニメーションを実現
  4. 回転率と伸縮率を最小限に指定しすぐにでも使えるマテリアルデザインに仕上げた
  5. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

 

5. ボタンの文字が浮き上がるhoverアニメーション

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

コードを見る
<div class="container">
  <div class="bg-btn">
    <div class="btn button5">
      <div class="fonts">
        <h1>font scale</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: 5px 5px 5px rgba(0,0,0,0.6);
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色) */
}
.button5:hover {
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色) */
}
.fonts {
  width            : 250px;
  height           : 70px;
  padding          : 10px 0;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}
.fonts h1 {
  font-size: 28px;
  margin: 10px 0;
  transition-duration:.5s;
  transform: scale(1,1);
  /* XY軸(横縦)の伸縮率を指定 */
}
.button5:hover .fonts h1 {
  transform: scale(1.2,1.2);
  /* XY軸(横縦)の伸縮率を指定 */
}
ここがポイント!
  1. transformプロパティのscaleを指定して伸縮率を調整
  2. 文字にscaleを使って大きさが変わるアニメーションを追加することで汎用的なマテリアルデザインを実現
  3. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

参考

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

ふたご


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

ふたご

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

 

   話だけ聞いてみる