¿Cómo hacer que un botón de envío se muestre como un enlace?

Question

Esto no funciona en IE:

.text-button { background: transparent; 
       text-decoration: none; 
       cursor: pointer; } 



<input type="submit" class="text-button" value="vote+"/> 

Se muestra un botón cuadrado.

Answer 1

Copiado de este link puede hacer su botón parezca un enlace -

.submitLink { 
 
    background-color: transparent; 
 
    text-decoration: underline; 
 
    border: none; 
 
    color: blue; 
 
    cursor: pointer; 
 
} 
 
submitLink:focus { 
 
    outline: none; 
 
}

<input type="submit" class="submitLink" value="Submit">

Answer 2

intente esto:

.text-button { 
border: none; 
background: transparent; 
cursor: pointer } 

Answer 3

Prueba esto:

<style type="text/css"> 
    .text-button 
    { 
     background-color: Transparent;     
     text-decoration: underline;     
     color: blue; 
     cursor: pointer; 
     border:0 
    }  
</style> 
<input type="submit" class="text-button" value="vote+"/> 

Answer 4

<form name='test'> 
    <a href="javascript:document.forms['test'].submit()">As a link</a> 
</form> 

Answer 5

No se puede hacer eso al botón, ya que elementos como los elementos de entrada son elementos del navegador del cliente y la máquina, no su código CSS.

Debe usar una etiqueta <a href=""></a> que enlace a un fragmento de javascript que luego envía el formulario por usted.

Answer 6

IMO Supongo que soy un desarrollador difícil de tratar. Sugeriría a las personas que solicitan esta aplicación la opción de dejar que siga siendo un botón.

¿Han considerado lo siguiente?

1. ¿Es una buena práctica desde el punto de vista de la UI utilizar algo más que un botón para enviar un formulario?
2. Si va con el enfoque de CSS, no creo que Safari le permita cambiar el aspecto de un botón.
3. Si utiliza la etiqueta <a> con algunos javascript, entonces tiene un formulario sin un botón de envío, lo que puede causar dolores de cabeza en el futuro. ¿Cómo detecta su enlace de envío desde sus otras etiquetas <a> fácilmente?

Answer 7

Creo que la respuesta presentada anteriormente por Mofolo es la más correcta solución

estilo CSS de presentar botones para que se vean como las etiquetas de anclaje NO navegadores. Varios tipos de navegadores ignoran el estilo text-decoration: underline.

El mejor método en mi experiencia es usar javascript en el evento onclick de una etiqueta de ancla.

Por ejemplo:

A "Borrar" enlace en los detalles de un usuario de la pantalla forman, con la confirmación antes de enviar el formulario con un id de "DetallesUsuario"

<a href="#" onclick="if(confirm('Are you sure you want to delete this user?')){document.forms['userdetails'].submit();}return false;">Delete</a> 

Answer 8

I necesarios para preparar una redirección poste página y dado que estos dependen de enviar formularios, necesitaba colocar algo en ellos para que funcionen, incluso si el Javascript falló por alguna razón. Si Javascript falla, entonces un ancla para enviar el formulario tampoco funcionará. Tuve que formatear realmente el botón para que pareciera un enlace (por lo que la página de redirección se parece a una). Basé mi solución en lo que Vishal escribió, pero hice algunas pequeñas modificaciones para que se vea mejor en línea. Aquí está el resultado.

button 
 
{ 
 
    padding:0; 
 
    background-color:transparent; 
 
    text-decoration:underline; 
 
    border:none; 
 
    border:0; 
 
    color:blue; 
 
    cursor:pointer; 
 
    font-family:inherit; 
 
    font-size:inherit; 
 
} 
 

 
button::-moz-focus-inner 
 
{ 
 
    border:0; 
 
    padding:0; 
 
}

To complete the redirect <button>click here</button>.

Editar: El truco para eliminar el relleno en Firefox fue tomado de here

Edit2: Hecho estilo de fuente botón Heredar del elemento padre para que se vea como un enlace válido (anteriormente el tamaño de fuente y la familia de fuentes era diferente para el botón).