Diseñar una etiqueta de delimitación para que parezca un botón de envío

Question

Tengo un formulario donde hay un botón "Enviar" y un "Cancelar". El HTML es el siguiente:

<input type="submit" value="Submit" /> 
<a href="some_url">Cancel</a> 

Me gustaría que los dos se vean y actúen igual. Nada elegante, solo algo similar a cómo se ve el anclaje "Preguntar" en StackOverflow.

Puedo conseguir que los dos se vean de manera similar, con el cuadro delimitador, el color de fondo y el color de fondo, pero no puedo conseguir la altura y la alineación vertical para jugar bien entre ellos. Publicaba mi CSS, pero es un desastre en este punto que creo que podría ser más fácil comenzar desde cero, tener un diseño de CSS barebones funcionando, y luego seguir desde ahí.

P.S. Sé que podría usar un ancla en lugar de un ancla y conectar el evento onClick para hacer la redirección. Es casi una cuestión de principios en este punto ahora hacer esto bien usando un ancla (además hay consideraciones de araña web para tener en cuenta aquí).

Answer 1

Los enlaces y las entradas son muy diferentes, se utilizan para fines muy diferentes. Me parece que necesita un botón para la cancelación:

<button>Cancel</button> 

O tal vez una entrada:

<input type="button" value="Cancel"/> 

Answer 2

Por qué no utilizar un botón y llamar a la URL con JavaScript?

<input type="button" value="Cancel" onclick="location.href='url.html';return false;" /> 

Answer 3

estilo de su cambio en el botón Enviar para una etiqueta de ancla en su lugar y presentar usando javascript:

<a class="link-button" href="javascript:submit();">Submit</a> 
<a class="link-button" href="some_url">Cancel</a> 

function submit() { 
    var form = document.getElementById("form_id"); 
    form.submit(); 
} 

Answer 4

Lo mejor que se puede conseguir con estilos simples sería algo así como:

.likeabutton { 
    text-decoration: none; font: menu; 
    display: inline-block; padding: 2px 8px; 
    background: ButtonFace; color: ButtonText; 
    border-style: solid; border-width: 2px; 
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; 
} 
.likeabutton:active { 
    border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; 
} 

(Posiblemente con algún tipo de solución para detener que IE6-IE7 trate los botones enfocados como 'activos').

Sin embargo, esto no necesariamente se verá exactamente como los botones en el escritorio nativo; de hecho, para muchos temas de escritorio no será posible reproducir el aspecto de un botón en CSS simple.

Sin embargo, puede pedir el navegador para utilizar la reproducción nativa, que es lo mejor de todo:

.likeabutton { 
    appearance: button; 
    -moz-appearance: button; 
    -webkit-appearance: button; 
    text-decoration: none; font: menu; color: ButtonText; 
    display: inline-block; padding: 2px 8px; 
} 

Por desgracia, ya que puede haber adivinado por los prefijos específicos del navegador, este es un CSS3 feature que ISN' t suppoorted en todas partes todavía. En particular, IE y Opera lo ignorarán. Pero si incluye los otros estilos como respaldo, los navegadores compatibles con appearance abandonan esa propiedad, prefiriendo los fondos y bordes explícitos.

Lo que se podría hacer es utilizar los estilos appearance que el anterior por defecto, y hacer fixups JavaScript como sea necesario, por ejemplo .:

<script type="text/javascript"> 
    var r= document.documentElement; 
    if (!('appearance' in r || 'MozAppearance' in r || 'WebkitAppearance' in r)) { 
     // add styles for background and border colours 
     if (/* IE6 or IE7 */) 
      // add mousedown, mouseup handlers to push the button in, if you can be bothered 
     else 
      // add styles for 'active' button 
    } 
</script> 

Answer 5

El uso de una etiqueta de botón en lugar de la entrada, ponerlo a cero y poner un lapso en el interior, tendrás que diseñar tanto el enlace como el lapso de la misma manera. Implica un marcado adicional, pero funcionó para mí.

el marcado:

<button type="submit"> 
    <span>submit</span> 
</button> 
<a>cancel</a> 

el css:

button[type="submit"] { 
    display: inline; 
    border: none; 
    padding: 0; 
    background: none; 
} 

Answer 6

¿Qué tal

<a href="url"><input type="button" value="Cancel"></a> 

Answer 7

espero que esto ayudará.

<a href="url"><button>SomeText</button></a> 

Answer 8

le sugiero que mediante la entrada en Enviar/botón en lugar de anclaje y poner esta línea de código onClick="javascript:location.href = 'http://stackoverflow.com';" en esa entrada Presentar/botón que desea trabajar como enlace.

Presentar Ejemplo

<input type="submit" value="Submit" onClick="javascript:location.href = 'some_url';" /> 

Botón Ejemplo

<button type="button" onClick="javascript:location.href = 'some_url';" />Submit</button> 

Answer 9

HTML

<a href="#" class="button"> HOME </a> 

CSS

.button { 
     background-color: #00CCFF; 
     padding: 8px 16px; 
     display: inline-block; 
     text-decoration: none; 
     color: #FFFFFF; 
     border-radius: 3px; 
} 
.button:hover{ background-color: #0066FF;} 

Watch the tutorial

https://youtu.be/euti4HAJJfk

Answer 10

El uso de CSS:

.button { 
    display: block; 
    width: 115px; 
    height: 25px; 
    background: #4E9CAF; 
    padding: 10px; 
    text-align: center; 
    border-radius: 5px; 
    color: white; 
    font-weight: bold; 
} 

<a href="some_url" class="button ">Cancel</a>