boton con aspecto de link

[halizia]

hola a todos!

estoy tratando de hacer un botón pero que tenga aspecto de link, se hace con un css pero, no m funciona :s Me puede ayudar alguien?

Saludos y gracias.

[dec]

Hola,

No sé si te refieres a algo más o menos como esto:

Código PHP:

<style type="text/css">

.btnlink {
    color: blue;
    border: none;
    cursor: pointer;
    background-color: #fff;
    text-decoration: underline;
}
  .btnlink:hover {
     color: red;
     background-color: #fff;
  }

</style>

<form>
 <div>
  <input class="btnlink" type="button" value="Clic aquí" />
 </div>
</form> 


Una variante (más general) podría ser esta, usando un selector CSS en lugar de una clase:

Código PHP:

<style type="text/css">

input[type=button] {
    color: blue;
    border: none;
    cursor: pointer;
    background-color: #fff;
    text-decoration: underline;
}
  input[type=button]:hover {
     color: red;
     background-color: #fff;
  }
  
</style>

<form action="" method="post">
 <div>
  <input type="button" value="Clic aquí" />
 </div>
</form> 


[Mick]

Eso se suele hacer con javascript, no con css, porque segun el navegador, varia la apariencia final, y hay algunas propiedades a las que algunos navegadores no hacen caso si se aplican a botones. En concreto el explorer se pasará por el forro la propiedad hover de un boton, ya que solo hace caso a los :hover de los links.

<form name="miformulario">

<a href="javascript:document.miformulario.submit();">Submit</a>

</form>

[dec]

Hola,

A ver... que yo sepa no se puede (con CSS) convertir un enlace en un botón... hasta donde yo llego, ya digo. Por otro lado yo no pensaba en mi respuesta que se refería a que un enlace actuara como un botón, sino que entendí que lo que se quería era que un botón tuviera apariencia de enlace.

Dicho esto, la segunda variante del código que he puesto más arriba (el que hace uso de selectores CSS) no funciona en Internet Explorer 7, es cierto, aunque funciona en Opera y Firefox sin problemas. Pero, el primer código, es decir, el que hace uso de una clase CSS funciona en Internet Explorer 7, Opera y Firefox.

He dicho.

[halizia]

Yo solo quería el aspecto y con <style> de dec ha salido lo que quería.
Muchas gracias!!

[roman]

Empezado por dec

la segunda variante del código que he puesto más arriba (el que hace uso de selectores CSS) no funciona en Internet Explorer 7

A mi me funciona perfecto en Firefox 2 e Internet Explorer 7, con todo y hover. Gracias por lo de los selectores, no lo conocía.

// Saludos

[dec]

Hola,

Empezado por Román

A mi me funciona perfecto en Firefox 2 e Internet Explorer 7, con todo y hover. Gracias por lo de los selectores, no lo conocía.

Pues chico, cuando lo probé no iba bien...

Respecto de los selectores CSS... yo es algo en lo que estoy pez, pero, me consta que se pueden hacer maravillas con ellos...

[roman]

¡Ah pues...! ¿No es así como debe verse?



// Saludos