閉じるボタンCSS

美しい閉じるボタン CSS を実装する方法

閉じるボタンは非常に基本的な要素ですが、Web サイトやアプリのデザインで目立つようにする方法はたくさんあります。この記事では、美しく目を引く閉じるボタンを作成するための CSS のヒントをいくつか紹介します。

1. 基本スタイルの設定

ほとんどの閉じるボタンでは、丸い div 要素を使用して基本形状を作成する必要があります。次に、CSS を使用してスタイルを設定できます。例:

.close {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

これにより、灰色の背景色で 16 ピクセルの丸い閉じるボタンが作成されます。ユーザーがこの要素がクリック可能であることがわかるように、マウス ポインターのスタイルを変更するポインター CSS プロパティも追加したことに注意してください。

2. 閉じるアイコンを追加する

閉じるボタンをより認識しやすくするために、標準の「x」形状を追加できます。 CSS を使用してこの形状を作成し、疑似要素を生成できます。例:

.close::before, .close::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 10px;
  background-color: #fff;
}

.close::before {
  transform: rotate(45deg);
}

.close::after {
  transform: rotate(-45deg);
}

これにより、閉じるボタンに上下の「x」記号が追加され、識別しやすくなります。

3. インタラクティブなアクションを追加する

ユーザーがマウスを閉じるボタンの上に移動するときに、操作性を向上させるためにいくつかのインタラクティブな効果を追加することができます。たとえば、CSS トランジション アニメーションを使用して色の効果を追加できます。

.close:hover {
  background-color: #aaa;
  transition: background-color 0.2s ease-in-out;
}

これにより、マウスが閉じるボタンの上にあるときに背景色が変更され、0.2 秒のトランジション アニメーションを使用して色が変わります。スムーズに変化します。

4. さまざまなシナリオに適応する

基本的な丸い閉じるボタンに加えて、アプリケーションの特定のシナリオに合わせて別のスタイルを作成することができます。たとえば、モーダル ウィンドウでは、ユーザーが見つけやすいように、大きな閉じるボタンが必要になる場合があります。いくつかの基本的な CSS トリックを使用して、さまざまなスタイルを作成できます。

.close-modal {
  font-size: 24px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.close-modal::before, .close-modal::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 18px;
  background-color: #fff;
}

.close-modal::before {
  transform: rotate(45deg);
  top: 13px;
}

.close-modal::after {
  transform: rotate(-45deg);
  top: 13px;
}

これにより、より大きく目立つ閉じるボタンが作成され、アイコンの色が白に変更されるため、識別しやすくなります。

概要

「閉じる」ボタンはどのアプリケーションでも不可欠な要素ですが、CSS のトリックを使用して目立つようにすることができます。基本的なスタイルを作成し、それにインタラクティブ性を追加することで、強力で目を引く閉じるボタンを作成できます。さまざまなシナリオやユースケースに合わせて、必要に応じて調整および変更できます。

以上が閉じるボタンCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。