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

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

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

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

この記事の目次

ボタンにhoverアニメーションで動きをつける方法３選

ボタンが浮かび上がるhoverアニメーション
ボタンが360°回転するhoverアニメーション
ボタンが横方向に360°回転するhoverアニメーション

１. ボタンが浮かび上がる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;
}

ここがポイント！

flexboxを使ってボタンをcontainerの真ん中に設置
transform : translateでボタンを浮き上がらせるアニメーションを実現
box-shadowで3Dボタンのように変化
transitionプロパティを指定して滑らかなアニメーションを実現

２. ボタンが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);
}

ここがポイント！

flexboxを使ってボタンをcontainerの真ん中に設置
box-shadowで3Dボタンのように変化
transform: rotateXで縦回転のアニメーションを実現
transitionプロパティを指定して滑らかなアニメーションを実現

３. ボタンが横方向に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);
}

ここがポイント！