wake-up-neo.com

HTML CSS Unsichtbarer Button

Hallo, ich versuche, eine unsichtbare Schaltfläche zu erstellen (immer noch funktionsfähig und anklickbar), da meine Schaltflächenstile im Hintergrund eingebettet sind und ich sie nicht schneiden möchte und alles von Anfang an machen möchte. 

Ich möchte also nur eine Schaltfläche erstellen, sie an der Stelle des Hintergrunds platzieren, an der sich die Schaltfläche befinden soll, und sie unsichtbar machen, damit das Bild der Hintergrundschaltfläche angezeigt und angeklickt werden kann. 

Irgendwelche Vorschläge? Vielen Dank!

14
user1880779

sie müssen die folgenden Eigenschaften für ein button-Element verwenden, um es transparent zu machen.

Transparente Schaltfläche ohne Text

button {

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

Transparente Schaltfläche mit sichtbarem Text

button {

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

und verwenden Sie absolute position, um das Element zu positionieren.

Zum Beispiel

sie haben das Button-Element unter einem div. Verwenden Sie position: relativ für div und position: absolut für die Schaltfläche, um sie innerhalb des div zu positionieren.

hier ist eine funktionierende JSFiddle

hier ist ein aktualisiertes JSFiddle , das nur Text von der Schaltfläche anzeigt.

28
Amyth

Sie können CSS verwenden, um die Schaltfläche auszublenden.

button {
  visibility: hidden;
}

Wenn es sich bei Ihrem <button> nur um einen anklickbaren Bereich im Bild handelt, warum sollten Sie sich dann eine Schaltfläche daraus machen? Sie können stattdessen <map> element verwenden. 

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

Geben Sie die Höhe und Breite in Bezug auf das Bild im Hintergrund an. Dadurch werden die Ränder und die Farbe einer Schaltfläche entfernt. Möglicherweise müssen Sie sie auch absolut positionieren, damit Sie sie richtig an der richtigen Stelle platzieren können Code

Um es wirklich unsichtbar zu machen, müssen Sieoutline setzen: none;Andernfalls wäre in einigen Browsern ein blauer Umriss vorhanden, und Sie müssendisplay: blocksetzen, wenn Sie darauf klicken und die entsprechenden Abmessungen festlegen müssen 

6
Mevin Babu

HTML

<input type="button">

CSS

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

Verwenden Sie CSS background:transparent; für Ihren Button/Div.

JSFiddle

1
Vucko