it-swarm.com.de

Wie erstelle ich eine transparente HTML-Schaltfläche?

Ich verwende Dreamweaver, um eine Website zu erstellen, und ich dachte daran, nur Photoshop zu verwenden, um Hintergründe zu erstellen. Ich entschied mich dazu, dies nur zu tun, weil ich den Schaltflächennamen einfach durch Bearbeiten der Codes ändern könnte. Ich könnte mich nur auf den Code beziehen. Wenn ich Schaltflächen mit Photoshop erstellen würde, könnte ich die Texte in diesen Schaltflächen oder in keinem Element leicht bearbeiten.

Daher ist meine Frage einfach: Wie erstelle ich eine Schaltfläche mit einem einfachen Inline-Stil, die 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 nach dem Klicken immer noch einen Randschatten.

91
Shinji

Fügen Sie outline:none hinzu, um die Kontur beim Klicken zu entfernen

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>

185
j08691

Die Lösung ist eigentlich ganz einfach:

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

Dies macht einen Inline-Stil. Sie definieren den Rand als 1 Pixel, durchgezogene Linie und Schwarz in Farbe. Die Hintergrundfarbe wird dann auf transparent gesetzt.


UPDATE

Ihre ACTUAL-Frage scheint zu sein, wie Sie den Rand 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

2
EnigmaRM

Machen Sie ein div und verwenden Sie Ihr Bild (png mit transparentem Hintergrund) als Hintergrund des div. Dann können Sie beliebigen Text innerhalb dieses div anwenden, um über der Schaltfläche zu schweben. Etwas wie das:

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

CSS:

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

Das Hintergrundbild auf "none" zu setzen, funktioniert ebenfalls:

button {
    background-image: none;
}
0
vivoconunxino
<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
user3917930