página - Hacer un<botón> que es un enlace en HTML

href html ejemplos

Question

Básicamente, me gusta la forma en que se <input type="submit"> , con el botón que se puede hacer clic cuando agrega un poco de CSS. Sin embargo, los botones regulares no tienen el mismo estilo, no tienen capacidad para hacer clic sin algunos CSS o JS importantes, y usted tiene que usar imágenes.

Hice botones de envío en enlaces, mediante el uso de la acción del formulario, pero esto requiere que haga un nuevo formulario para cada botón. ¿Cómo puedo encontrar un medio feliz? El uso de formularios múltiples está causando problemas en mi diseño que parece que no puedo solucionar a menos que encuentre otra forma de crear botones que sean enlaces en HTML, que tengan un estilo predeterminado que los haga tener un estado presionado (y no me refiero a configuración predeterminada del navegador).

¿Algunas ideas?

Answer 1

Las 3 formas más sencillas en mi humilde opinión son

1: crea una imagen de un botón y coloca un href a su alrededor. (No es una buena manera, pierde flexibilidad y le proporcionará muchas dificultades y problemas).

2 (El más fácil) -> JQuery

<input type="submit" someattribute="http://yoururl/index.php">

  $(''button[type=submit] .default'').click(function(){
     window.location = $(this).attr("someattribute");
     return false; //otherwise it will send a button submit to the server

   });  

3 (también es fácil, pero prefiero el anterior):

<INPUT TYPE=BUTTON OnClick="somefunction("http://yoururl");return false" VALUE="somevalue">

$fn.somefunction= function(url) {
    window.location = url;
};

Answer 2

Tienes tres opciones:

• Estilo de enlaces para que parezcan botones con CSS.

  Solo mira las "etiquetas" de color azul claro bajo tu pregunta.

  Es posible, incluso para darles una apariencia deprimida cuando se hace clic (utilizando pseudo-clases como: activo), sin ningún tipo de secuencias de comandos. Muchos de los principales sitios, como Google, están empezando a hacer botones de estilos CSS en estos días de todos modos, scripting o no.

• Coloque un elemento <form> separado alrededor de cada uno.

  Como mencionaste en la pregunta. Fácil y definitivamente funcionará sin Javascript (o incluso CSS). Pero agrega un pequeño código extra que puede parecer desordenado.

• Confíe en Javascript.

  Que es lo que dijiste que no querías hacer.

Answer 3

Un poco más fácil y se ve exactamente como el botón en el formulario. Simplemente use la entrada y ajuste la etiqueta de ancla alrededor de ella.

<a href="#"><input type="button" value="Button Text"></a>

Answer 4

<a href="#"><button>Link Text</button></a>

Pediste un enlace que parece un botón, así que utiliza un enlace y un botón :-) Esto conservará el estilo predeterminado de los botones del navegador. El botón por sí solo no hace nada, pero al hacer clic se activa su enlace principal.

Manifestación:

<a href="http://.com"><button>Link Text</button></a>

Answer 5

Use javascript:

<button onclick="window.location.href=''/css_page.html''">CSS page</button>

Siempre puede darle estilo al botón en css anyaways. Espero que haya sido de ayuda!

¡Buena suerte!