web-dev-qa-db-ja.com

HTML CSS不可視ボタン

こんにちは私はボタンのスタイルがバックグラウンドに埋め込まれ、それらをスライスしたくないので、目に見えないボタン（まだ機能的でクリック可能な）を作成しようとしています。

したがって、ボタンを作成し、ボタンを配置する必要がある背景の部分にボタンを配置し、背景ボタンの画像を表示してクリックできるように非表示にします。

助言がありますか？どうもありがとうございました！

htmlcssbuttoninvisible
15
user1880779

button要素に次のプロパティを使用して、透明にする必要があります。

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

button {

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

表示テキスト付きの透明ボタン

button {

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

絶対positionを使用して要素を配置します。

例えば

divの下にボタン要素があります。 position：divで相対、position：ボタンで絶対を使用して、div内に配置します。

ここに動作しています JSFiddle

ここに更新された JSFiddle があり、ボタンからのテキストのみが表示されます。

30
Amyth

CSSを使用してボタンを非表示にできます。

button {
  visibility: hidden;
}

もしあなたの <button>は画像上のクリック可能な領域にすぎませんが、なぜそれをボタンにするのですか？ <map> 要素。

6
xiaoyi
button {
    background:transparent;
    border:none;
    outline:none;
    display:block;
    height:200px;
    width:200px;
    cursor:pointer;
}

背景の画像に対して高さと幅を指定します。これにより、ボタンの境界線と色が削除されます。また、必要な場所に正しく配置できるように、絶対に配置する必要がある場合があります。コード

本当に見えないようにするには、outline：none;を設定する必要があります。設定する必要がありますdisplay：blockクリックして寸法を設定する必要がある場合

6
Mevin Babu

[〜＃〜] html [〜＃〜]

<input type="button">

[〜＃〜] css [〜＃〜]

input[type=button]{
 background:transparent;
 border:0;
}
3
Muhammad Usman

CSSを使用background:transparent;ボタン/ divに。

JSFiddle

1
Vucko