CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけで実現！ボタンをクリックしたときの「押し込み」エフェクトの作り方

WebサイトやアプリのUIにおいて、ボタンが実際に「押された」ときのフィードバックがあると、ユーザーは操作を直感的に理解でき、インターフェース全体の使い心地が大きく向上します。

JavaScriptを使わなくても、CSSの:active擬似クラスとbox-shadow・transformプロパティを組み合わせるだけで、リアルな押し込みエフェクトを簡単に実装できます。以下のコードを実行して、その動作を確認してみてください。

実装例

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: orange;
  color: white;
  border: none;
  border-radius: 7px;
  box-shadow: 0 5px #999;
  display: inline-block;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  outline: none;
}
.button:hover {
  background-color: blue;
}
.button:active {
  background-color: orange;
  box-shadow: 0 5px gray;
  transform: translateY(2px);
}
</style>
</head>
<body>
<button class="button">Result</button>
</body>
</html>

コードのポイント解説

1. 立体感の演出：box-shadow

.buttonクラスでは、box-shadow: 0 5px #999;によってボタンの下方向にグレーの影を落としています。これにより、ボタンが浮き上がって見える立体感が生まれます。

2. ホバー時の変化：:hover

:hover擬似クラスを使うことで、マウスカーソルを重ねたときに背景色がオレンジから青へと変化し、クリック可能であることを視覚的に伝えます。

3. 押し込み効果：:active + transform

押された瞬間に適用されるのが:active擬似クラスです。ここでは次の2つの処理を行っています。

  • transform: translateY(2px); … ボタン本体を下方向に2px移動させ、「沈み込む」動きを表現します。
  • box-shadow の変更 … 影の色を変更することで、押した瞬間の見た目の変化を強調しています。影の距離を短くすれば、より深く押し込まれた印象になります。

カスタマイズのヒント

translateY()の値やbox-shadowのオフセットを調整すれば、押し込みの深さや速度感を自由に変更できます。また、transitionプロパティを追加すると、アニメーションが滑らかになり、より洗練された印象を与えられます。

この手法は依存ライブラリ不要で軽量なため、あらゆるWebサイトのボタンデザインに手軽に取り入れられます。ぜひ自分のプロジェクトでも試してみてください。

  1. CSSを使ってボタンに透明度を追加する方法

    ボタンに透明度を追加したい場合は、CSSの opacity プロパティを使用します。このプロパティを設定すると、ボタンが無効化されているような見た目を作ることができます。opacity プロパティの値は 0 から 1 の範囲で指定します。0 は完全に透明、1 は完全に不透明を意味します。例えば「0.8」を指定すると、元の色が80%の濃さで表示され、少し薄く透けた印象になります。以下のコードでは、通常のボタンと透明度を設定したボタンを並べて比較できるようにしています。実際にブラウザで表示して違いを確認してみてください。サンプルコード<!DOCTYPE html> <html&g

  2. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo