html - etiquetas - meta tags ejemplos

Diseñar una etiqueta de anclaje 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 esto:

<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 hacer que los dos se vean de manera similar, con el cuadro delimitador, el color de fondo y el color de fondo de desplazamiento, 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í.

PD Sé que podría usar un ancla en lugar de un ancla y conectar el evento onClick para hacer el redireccionamiento. 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

¿Por qué no simplemente usar un botón y llamar a la url con JavaScript?

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

Answer 2

Dale estilo a tu cambio del botón Enviar a una etiqueta de anclaje en su lugar y envía 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 3

Espero que esto sea de ayuda.

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

Answer 4

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

Mira el tutorial

https://youtu.be/euti4HAJJfk

Answer 5

Lo mejor que puedes obtener con estilos simples sería algo 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 evitar 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 pedirle al navegador que use la representació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;
}

Desafortunadamente, como habrás adivinado a partir de los prefijos específicos del navegador, esta es una característica de CSS3 que todavía no está disponible en todas partes. En particular, IE y Opera lo ignorarán. Pero si incluye los otros estilos como copia de seguridad, los navegadores compatibles con la appearance abandonan esa propiedad, prefiriendo los fondos y bordes explícitos.

Lo que podría hacer es usar los estilos de appearance como los anteriores de forma predeterminada, y realizar correcciones de JavaScript según 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 6

Los enlaces y las entradas son cosas muy diferentes, usadas para propósitos muy diferentes. Me parece que necesitas un botón para cancelar:

<button>Cancel</button>

O tal vez una entrada:

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

Answer 7

Qué tal si

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

Answer 8

Te sugiero que uses ambos Input Submit / Button en lugar de anchor y coloques esta línea de código onClick="javascript:location.href = ''http://.com'';" en ese botón Enviar entrada / que desea trabajar como enlace.

Enviar ejemplo

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

Ejemplo de botón

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

Answer 9

Usando 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>

Answer 10

Usando una etiqueta de botón en lugar de la entrada, restableciéndola y poniendo un lapso dentro, entonces simplemente tendrá que diseñar tanto el enlace como el lapso de la misma manera. Implica un margen 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;
}