Frage Wie mache ich eine transparente HTML-Schaltfläche?


Ich benutze Dreamweaver, um eine Website zu erstellen, und ich dachte daran, einfach Photoshop zu verwenden, um Hintergründe zu erstellen. Ich habe mich dafür entschieden, nur weil ich den Code einfach ändern könnte, indem ich nur die Codes ändere. Ich könnte einfach auf den Code verweisen. Wenn ich Schaltflächen mit Photoshop erstellen würde, wäre ich nicht in der Lage, die Texte in diesen Schaltflächen oder in irgendeinem Element einfach zu bearbeiten.

Meine Frage ist einfach: Wie erstelle ich eine Schaltfläche, die einen einfachen Inline-Stil hat, der sie transparent macht und den Wert der Schaltfläche weiterhin sichtbar lässt?

.button {     
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;        
}

Es hinterlässt immer noch eine Grenze Schatten nach Ihrem Klick es.


80
2018-03-26 20:29


Ursprung


Antworten:


Um die Kontur beim Klicken zu entfernen, fügen Sie hinzu outline:none

jsFiddle Beispiel

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}
<button>button</button>


161
2018-03-26 20:33



Machen Sie ein div und verwenden Sie Ihr Bild (png mit transparentem Hintergrund) als Hintergrund des div, dann können Sie jeden Text innerhalb dieses div anwenden, um den Mauszeiger über die Schaltfläche zu bewegen. Etwas wie das:

<div class="button" onclick="yourbuttonclickfunction();" >
Your Button Label Here
</div>

CSS:

.button {
height:20px;
width:40px;
background: url("yourimage.png");
}

2
2018-03-26 20:39



Die Lösung ist eigentlich ziemlich einfach:

<button style="border:1px solid black; background-color: transparent;">Test</button>

Dies macht einen Inline-Stil. Sie definieren den Rahmen als 1px, durchgezogene Linie und als schwarze Farbe. Die Hintergrundfarbe wird dann auf transparent gesetzt.


AKTUALISIEREN

Scheint wie Ihre IST-Frage ist, wie Sie die Grenze verhindern, nachdem Sie darauf geklickt haben. Das kann mit einem CSS-Pseudo-Selektor gelöst werden: :active.

button {
    border: none;
    background-color: transparent;
    outline: none;
}
button:focus {
    border: none;
}

JSFiddle-Demo


1
2018-03-26 20:34



<div class="button_style">
This is your button value
</div>

.button_style{   
background-color: Transparent;
border: none;             /* Your can add different style/properties of button Here*/
cursor:pointer;    
}

0
2017-08-07 10:28



Das Hintergrundbild kann auch auf none eingestellt werden:

button {
    background-image: none;
}

0
2017-09-19 10:28