ボタンに動きをつけるには、まずHTMLとCSSで使えるアニメーションの基本を理解することが大切です。
JavaScriptを使わなくても、視覚的に魅力的な効果を実現することが可能です。

アニメーションの種類
最も手軽に試せるのが、ホバー時の変化です。
たとえば、マウスを乗せたときに色やサイズを変えることで、ユーザーのアクションに反応するボタンを作れます。
さらに、CSSのtransitionプロパティを使えば、色や影、位置などの変化をなめらかに補間できます。
スムーズな動きは、操作感を高めるうえで非常に有効です。

また、@keyframesを用いたキーフレームアニメーションでは、より複雑な動き（繰り返し動く光彩、グラデーションの変化など）も実現できます。これにより、静的なHTML要素にも動的な印象を与えられます。

JavaScriptなしでもここまでできる 「動き＝JavaScript」と思われがちですが、実はCSSアニメーションだけでも十分な表現力があります。
特にボタンの場合、クリックやホバーの反応を自然に演出するだけで、ユーザーの印象が大きく変わります。
HTMLとCSSの基本を押さえておけば、軽量で保守性の高いアニメーションを簡単に取り入れられます。

HTMLとCSSだけでも、シンプルかつ効果的なアニメーション付きボタンは簡単に作れます。
ここでは、初心者でも実装しやすい2つの基本パターンを紹介します。

色が変わるボタン
もっとも基本的なアニメーションは、ホバー時に背景色が変わるボタンです。
HTMLでは通常のボタン要素を用意し、CSSでbackground-colorを設定します。
さらにtransitionプロパティを加えることで、色の変化が滑らかになり、見た目にやさしい印象を与えます。

css
button {
background-color: #3498db;
color: #fff;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}

拡大するボタン
次に紹介するのは、ホバー時に拡大するアニメーションです。
transform: scale()を使うことで、ユーザーの操作に合わせてボタンが“反応”する感覚を演出できます。
こちらも`transition`を組み合わせることで、自然でスムーズな動きに仕上がります。

css
button {
transition: transform 0.2s ease;
}
button:hover {
transform: scale(1.1);
}

どちらもHTMLとCSSの基本だけで実装可能で、軽量かつ直感的なアニメーションを実現できます。

基本を押さえたら、次は見た目にもおしゃれなアニメーション付きボタンにチャレンジしてみましょう。
HTMLとCSSだけでできる、3つの表現力豊かなボタンを紹介します。

シャドウが浮き出るボタン
box-shadowとtransitionを活用すれば、マテリアルデザイン風の立体感あるボタンが実現できます。
ホバー時にシャドウが強調され、まるで浮き上がってくるような演出が可能です。

css
button {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease;
}
button:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

ボーダーアニメーション付きボタン
次は、ボーダーがアニメーションで現れるボタンです。
疑似要素（`::before`や`::after`）を使い、ボタンの外枠がホバー時にスッと表示されるようにします。
CSSだけで複雑な動きを実現できる、応用的なテクニックです。

css
.button-border {
position: relative;
padding: 10px 20px;
color: #333;
border: none;
background: none;
cursor: pointer;
}
.button-border::before {
content: "";
position: absolute;
inset: 0;
border: 2px solid #333;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.button-border:hover::before {
transform: scaleX(1);
}

グラデーションが動くボタン
視覚的に最もインパクトがあるのが、背景グラデーションが動くボタンです。 CSSの`linear-gradient`と`background-position`、さらに`@keyframes`を組み合わせることで、常に動き続ける背景を表現できます。

css
.button-gradient {
background: linear-gradient(270deg, #ff6ec4, #7873f5);
background-size: 400% 400%;
color: white;
padding: 12px 24px;
border: none;
animation: gradientMove 4s ease infinite;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

このように、HTMLとCSSだけでも洗練されたアニメーションボタンは十分に表現できます。 目的やデザインに合わせて使い分けることで、Webサイト全体のクオリティが一段と向上します。
HTMLとCSSだけでも、視覚的に魅力あるアニメーションボタンは簡単に実装できます。 色の変化や拡大といった基本的な動きから、シャドウやグラデーションを活用したおしゃれな演出まで、コード数行で表現の幅は大きく広がります。 特別なJavaScriptの知識がなくても、ユーザーの注目を集めたり、操作性を高めたりすることが可能です。 今回紹介したテクニックは、実務やポートフォリオなど幅広いシーンで活用できる内容です。 ぜひ自身のサイトや制作物に取り入れて、印象的なボタンを作ってみてください。