HTML(26)ボタンアニメーションのカスタマイズ

前回はファビコンの付け方について紹介しました。

HTML(25)ファビコンの付け方

今回は、ファビコンの付け方について紹介します。ファビコンをつける事によってさらに目につきやすいデザインになります。

今回はボタンアニメーションのカスタマイズについて紹介したいと思います。

【もっと詳しく知りたい人は是非これを読んでください！！】

【中古】1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本）

価格:747円 (2024/12/16 23:17時点) 感想(2件)

CSSでボタンのアニメーションをカスタマイズ

Webページをデザインするとき、ボタンの見た目や動きで印象がガラリと変わりますよね。この記事では、CSSだけを使ってボタンのアニメーションをカスタマイズする方法をたっぷり解説します。コード例も載せていますので、ぜひ試してみてください！

アニメーションの基本を押さえよう

CSSでアニメーションを作るには、主に以下のプロパティを使います。

transition: 動きの基本！例えば、色が変わる速さなどをコントロールできます。
@keyframes: 複雑なアニメーションを作りたいときに使います。
transform: 要素の位置や大きさを変えるときに便利です。

「なんだか難しそう」と思うかもしれませんが、サンプルコードを見ながら少しずつ覚えていけば大丈夫です。

さっそく動かしてみよう

まずは、色がふわっと変わる簡単なボタンを作ってみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ボタンアニメーション</title>
  <style>
    .button {
      background-color: #3498db;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .button:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <button class="button">Hover Me!</button>
</body>
</html>

このコードをブラウザで開くと、ボタンにマウスを載せたときに背景色がスムーズに変わるのがわかるはずです。transitionが「変化をなめらかにする魔法」と覚えておけばOK！

ボタンを大きくしたり回したりしてみよう

次は、transformを使ったアニメーションです。ボタンを拡大したり、回転させたりしてみましょう。

<style>
  .button {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.2) rotate(10deg);
  }
</style>

この例では、ボタンにマウスを載せると少し大きくなり、さらに斜めに傾きます。scaleは拡大・縮小、rotateは回転の角度を指定します。

より動きを複雑にしてみよう

もっと複雑なアニメーションを作りたい場合は、@keyframesを使います。たとえば、ボタンが上下にぴょんぴょん跳ねる動きを作るには、以下のように書きます。

<style>
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .button {
    background-color: #2ecc71;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    animation: bounce 0.5s infinite;
  }
</style>

この例では、ボタンが上下に弾むような動きを繰り返します。@keyframesの中で、動きのステップを指定しています。

実用的なアニメーションを作ろう

最後に、実際のWebサイトでもよく使われるアニメーションを作ってみましょう。

ボタンに影をつけて押し込むような効果

<style>
  .button {
    background-color: #9b59b6;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px #8e44ad;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .button:active {
    box-shadow: 0 2px #8e44ad;
    transform: translateY(2px);
  }
</style>

このコードでは、ボタンをクリックすると少し沈み込むようなアニメーションを作っています。box-shadowで影を調整し、translateYで下に動かしています。