【解説付】hoverでつくるボタンアニメーション3選(初心者でもカンタン)

今回はシンプルなボタンにhoverアニメーションをつけて実装してみました。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

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

 

 

1. ボタンが浮かび上がるhoverアニメーション

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

実際の動きはこちらです
コードを見る
<div class="container">
  <div class="container">
    <button class="btn">ボタン</button>
  </div>
</div>
.container {
  /* flexboxでcontainerの中身をど真ん中に設置 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
}
.btn {
  display: block;
  margin: 50px 0;
  width: 250px;
  height: 70px;
  border: none;
  background-color: limegreen;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border-radius: 10px;
  /* cursor: pointerを設定することでカーソルがボックスの上にある時カーソルがpointerに変化 */
  cursor: pointer;
  /* アニメーションの滑らかさを調整 */
  transition: 0.3s linear;
  /* クリックした際のボタンの枠(outline)が表示されなくなる */
  outline: none;
}

/* ホバー後の変化 */
.btn:hover {
  /* アニメーションの動き幅を調整 */
  /* X軸(縦軸)の回転角度を設定 */
  transform: rotateX(15deg);
  /* 要素の移動位置を設定 */
  transform : translate(5%,-5%);
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色) */
  box-shadow: -5px 5px 10px gray;
}
ここがポイント!
  1. flexboxを使ってボタンをcontainerの真ん中に設置
  2. transform : translateでボタンを浮き上がらせるアニメーションを実現
  3. box-shadowで3Dボタンのように変化
  4. transitionプロパティを指定して滑らかなアニメーションを実現

 

2. ボタンが360°回転するhoverアニメーション 

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

実際の動きはこちらです
コードを見る
<div class="container">
  <div class="container">
    <button class="btn">ボタン</button>
  </div>
</div>
.container {
  /* flexboxでcontainerの中身をど真ん中に設置 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
}
.btn {
  display: block;
  margin: 50px 0;
  width: 250px;
  height: 70px;
  border: none;
  background-color: limegreen;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border-radius: 10px;
  /* cursor: pointerを設定することでカーソルがボックスの上にある時カーソルがpointerに変化 */
  cursor: pointer;
  /* アニメーションの滑らかさを調整 */
  transition: 0.3s linear;
  /* クリックした際のボタンの枠(outline)が表示されなくなる */
  outline: none;
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色) */
  box-shadow: -5px 5px 10px gray;
}

/* ホバー後の変化 */
.btn:hover {
  /* X軸(縦軸)の回転角度を設定 */
  transform: rotateX(-360deg);
}
ここがポイント!
  1. flexboxを使ってボタンをcontainerの真ん中に設置
  2. box-shadowで3Dボタンのように変化
  3. transform: rotateXで縦回転のアニメーションを実現
  4. transitionプロパティを指定して滑らかなアニメーションを実現

 

3. ボタンが横方向に360°回転するhoverアニメーション

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

実際の動きはこちらです
コードを見る
<div class="container">
  <div class="container">
    <button class="btn">ボタン</button>
  </div>
</div>
.container {
  /* flexboxでcontainerの中身をど真ん中に設置 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
}
.btn {
  display: block;
  margin: 50px 0;
  width: 250px;
  height: 70px;
  border: none;
  background-color: limegreen;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border-radius: 10px;
  /* cursor: pointerを設定することでカーソルがボックスの上にある時カーソルがpointerに変化 */
  cursor: pointer;
  /* アニメーションの滑らかさを調整 */
  transition: 0.3s linear;
  /* クリックした際のボタンの枠(outline)が表示されなくなる */
  outline: none;
  /* ボックスに影をつける(左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、色) */
  box-shadow: -5px 5px 10px gray;
}

/* ホバー後の変化 */
.btn:hover {
  /* Y軸(横軸)の回転角度を設定 */
  transform: rotateY(-360deg);
}
ここがポイント!
  1. flexboxを使ってボタンをcontainerの真ん中に設置
  2. box-shadowで3Dボタンのように変化
  3. transform: rotateYで横回転のアニメーションを実現
  4. transitionプロパティを指定して滑らかなアニメーションを実現

参考

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

ふたご


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

ふたご

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

 

   話だけ聞いてみる