HTML の隠しボタン: CSS を使用してボタンを非表示または表示します

Web 開発では、ボタンを非表示にすることは非常に一般的な要件です。場合によっては、ページスペースを常に占有するのではなく、一部のアクションアイテムを非表示にし、必要に応じて表示する必要があります。この場合、CSS を使用してボタンを非表示にしたり表示したりできます。

これを実現する方法は次のとおりです:

1. HTML に「非表示ボタン」タグを追加します

<button class="hide-btn">隐藏按钮</button>

2. CSS を使用してスタイルを設定しますボタンと属性

.hide-btn {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  cursor: pointer;
}

上記の CSS コードは、ページ外のボタンの位置を設定し、幅、高さ、透明度、マウス ポインターのスタイルも設定します。これらのプロパティにより、ボタンはページ上で非表示になりますが、クリックできるようになります。

3. ボタンを表示するコントローラを作成します

<button class="show-btn">显示按钮</button>

このボタンはユーザーがクリックできます。ユーザーがクリックすると、「隠しボタン」の表示がトリガーされます。 」ラベル。

4. コントローラーのスタイルと動作を設定する

.show-btn {
  cursor: pointer;
}

var hideBtn = document.querySelector('.hide-btn');
var showBtn = document.querySelector('.show-btn');

showBtn.addEventListener('click', function() {
  hideBtn.style.position = 'static';
});

ここでは、コントローラー ボタンにクリック イベントを追加します。ユーザーがボタンをクリックすると、「ボタンを非表示にする」ラベルが表示されます。ページ上に表示されるように位置を静的に設定します。

5. アニメーション効果の追加 (オプション)

このボタンの表示と非表示をよりスムーズにしたい場合は、CSS アニメーション効果を使用できます。たとえば、ユーザーが「表示ボタン」をクリックすると、「非表示ボタン」ラベルがフェードイン形式で表示されます。

.hide-btn {
  ...
  transition: opacity 1s;
}

.hide-btn.visible {
  opacity: 1;
}

showBtn.addEventListener('click', function() {
  hideBtn.classList.add('visible');
});

ここでは、CSS トランジション属性を使用して、1 つの不透明度から不透明度値を設定します。値を別の値に変換するトランジション効果。同時に .visible クラスも作成し、ユーザーが「表示ボタン」をクリックすると、それを「非表示ボタン」ラベルに追加し、CSS でトランジション効果をトリガーします。

概要

CSS を使用してボタンを非表示にしたり表示したりするのは非常に簡単です。 「隠しボタン」ラベルの位置をページの外側に設定し、コントローラーを使用して位置を変更するか、CSS アニメーション効果を使用して、よりスムーズに表示および非表示にするだけです。この方法は便利で実用的なだけでなく、ページのパフォーマンスや読み込み速度にも影響を与えません。

以上がHTML の隠しボタン: CSS を使用してボタンを非表示または表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。