Hoe maak je een transparante HTML-knop?

Ik gebruik Dreamweaver om een website te maken en ik dacht erover om gewoon Photoshop te gebruiken om achtergronden te maken. Ik besloot dit alleen te doen omdat als ik ervoor zou kiezen om de naam van de knop gemakkelijk te wijzigen door alleen de codes te bewerken, ik gewoon naar de code zou kunnen verwijzen. Als ik knoppen zou maken met Photoshop, zou ik de teksten in die knoppen of in enig element niet gemakkelijk kunnen bewerken.

Mijn vraag is dus simpel: hoe maak ik een knop met een eenvoudige inline-stijl waardoor deze transparant is en de waarde van de knop nog steeds zichtbaar is.

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

Het laat nog steeds een randschaduw achter nadat je erop hebt geklikt.

Antwoord 1, autoriteit 100%

Om de omtrek bij het klikken te verwijderen, voegt u outline:none

toe

jsFiddle-voorbeeld

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

Antwoord 2, autoriteit 2%

De oplossing is eigenlijk vrij eenvoudig:

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

Dit is een inline-stijl. U definieert de rand als 1px, ononderbroken lijn en zwart van kleur. De achtergrondkleur wordt dan ingesteld op transparant.

UPDATE

Het lijkt erop dat uw WERKELIJKE vraag is hoe u de rand kunt voorkomen nadat u erop hebt geklikt. Dat kan worden opgelost met een CSS pseudo-selector: :active.

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

JSFiddle-demo

Antwoord 3

Maak een div en gebruik je afbeelding ( png met transparante achtergrond ) als achtergrond van de div, dan kun je elke tekst in die div toepassen om over de knop te zweven. Zoiets als dit:

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

CSS:

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

Antwoord 4

<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;    
}

Antwoord 5

Het instellen van de achtergrondafbeelding op geen werkt ook:

button {
    background-image: none;
}

Antwoord 6

**voeg de bovenste pictogramknop op deze manier toe **

#copy_btn{
	align-items: center;
	position: absolute;
	width: 30px;
  height: 30px;
     background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}
.icon_copy{
	position: absolute;
	padding: 0px;
	top:0;
	left: 0;
width: 25px;
  height: 35px;
}

<button id="copy_btn">
                        <img class="icon_copy" src="./assest/copy.svg" alt="Copy Text">
</button>