1. ホーム
  2. html

[解決済み] HTML CSS インビジブルボタン

2022-02-12 13:07:01

質問

ボタンのスタイルが背景に埋め込まれているため、それらをスライスして最初からすべてやりたくないので、見えないボタン(まだ機能的でクリック可能)を作ろうとしています。

そこで、ただボタンを作り、ボタンがあるべき背景の部分にそれを置き、背景のボタン画像が見えてクリックできるように不可視にしたいのです。

何か提案はありますか?ありがとうございました。

解決方法は?

を使用する場合は、以下のプロパティを使用する必要があります。 button 要素を透過させることができます。

テキストなしの透明なボタン

button {

    background: transparent;
    border: none !important;
    font-size:0;
}

文字が見える透明なボタン

button {

    background: transparent;
    border: none !important;
}​

を使用し、絶対 position で要素の位置を指定します。

は、div の下に button 要素を配置しています。を使用します。 position はdivに相対し position ボタンを div 内に配置するために絶対指定します。

以下は動作中のものです。 JSFiddle

以下は、更新された JSFiddle ボタンからのテキストのみを表示するものです。