css – How to make a transparent HTML button?

css – How to make a transparent HTML button?

To get rid of the outline when clicking, add outline:none

JSFiddle example

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>

The solution is pretty easy actually:

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

This is doing an inline style. Youre defining the border to be 1px, solid line, and black in color. The background color is then set to transparent.

UPDATE

Seems like your ACTUAL question is how do you prevent the border after clicking on it. That can be resolved with a CSS pseudo selector: :active.

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

JSFiddle Demo

css – How to make a transparent HTML button?

Make a div and use your image ( png with transparent background ) as the background of the div, then you can apply any text within that div to hover over the button. Something like this:

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

CSS:

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