para - como posicionar un boton en html

¿Cómo hacer un botón HTML transparente?

Question

Estoy usando Dreamweaver para crear un sitio web y pensé simplemente usar Photoshop para crear fondos. Decidí hacerlo solo porque en caso de que eligiera cambiar el nombre del botón fácilmente editando los códigos, podría referirme al código. Si construyera botones usando Photoshop, no podría editar los Textos en esos botones o en cualquier elemento fácilmente.

Entonces mi pregunta es simple, ¿cómo creo un botón que tenga un estilo en línea simple haciéndolo transparente dejando el valor del botón aún visible?

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

Todavía deja un tono de borde después de hacer clic en él.

Answer 1

Establecer su imagen de fondo a ninguno también funciona:

button {
background-image: none;
}

Answer 2

Haz un div y usa tu imagen (png con fondo transparente) como fondo de div, luego puedes aplicar cualquier texto dentro de ese div para pasar el cursor sobre el botón. Algo como esto:

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

CSS:

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

Answer 3

La solución es bastante fácil en realidad:

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

Esto está haciendo un estilo en línea. Está definiendo el borde como 1px, línea continua y color negro. El color de fondo se establece en transparente.

ACTUALIZAR

Parece que tu pregunta REAL es cómo evitar el borde después de hacer clic en él. Eso se puede resolver con un pseudo selector de CSS :active .

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

Demostración de JSFiddle

Answer 4

Para deshacerte del contorno al hacer clic, agrega outline:none

Ejemplo jsFiddle

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>

Answer 5

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