botones

[viera90]

hola a todos! mi pregunta es la siguiente:

como puedo poner un boton hecho en photoshop que sea enlace a otra pagina?

El boton quiero que sea dinamico, es decir, que cuando lo pulse se vea el efecto de estar pulsado.

saludos!

[skatomundo]

Entiendo que cuando te refieres a "botón Photoshop" es una imagen creada en photoshop sea JPG, GIF, PNG u otro..

Siendo así, puedes utilizar una "class" definida para cada boton conteniendo un background-image por ejemplo:

Código CSS:

.miboton{
width : 100px;
height : 20px;
background-image : url(imagenormal.png);
}
 
.miboton:hover {
background-image : url(imagesobre.png);
}
 

Código HTML:

<a href="http://miserver/mipagina.html" class="miboton">Mi otra pagina</a>
 

Saludos,

[memoadian]

aunque lo mejor es que sea un sprite el botón.

es decir que la imagen tenga el boton sin y con el efecto y cuando se haga hover moverle la posicion

Código CSS:

.miboton{
    width : 100px;
    height : 20px;
    background-image : url(boton.png);
    background-position : top right ;
}
     
.miboton:hover {
    background-position : top left;
}
 

tambien se puede mover en pixeles top, left, right y bottom

[viera90]

si exacto, que no sea un boton basico de html, sino una imagen jpg, png... muchas gracias por la ayuda.

saludos!

[viera90]

1º funciona a medias, existe alguna manera de evitar poner en el enlace un texto es decir:

<a href="http://miserver/mipagina.html" class="miboton"></a>

y otra cuestión, el boton no se ve en su totalidad, se ve solo una parte dependiendo del texto que se ponga al enlace.

alguna solucion?

2º como puedo poner un input type="submit", pero siendo un boton diseñado por mi, no el boton que muestra por defecto HTML

saludos!

[memoadian]

imagen con link

Código HTML:

<a href="web.com"><img src="boton.png" alt=""/></a>
 

pero asi no podrias usar el efecto hover con css.

si no aparece la imagen completa debes modificar el css

considerando el ejemplo anterior

Código CSS:

.miboton{
    width : 100px;//aqui modifica al ancho de la imagen de tu botón
    height : 20px;//aqui el alto
    background-image : url(boton.png);
    background-position : top right ;
    display:block;//puedes agregar display block si no te respeta las medidas
}
 

para modificar submit es lo mismo

Código HTML:

<input type="submit" class="miboton">
 

y tomara el css de .miboton

[Jackie_Star]

Y un rollover? Yo creé una vez una barra de navegación con botones dinámicos que al pasar por encima hacían un efecto. Lo hice en photoshop guardando como HTML e Imágenes mediante sectores creando 2 imágenes iguales pero una con efecto y la otra sin efecto. Después en Dreamweaber lo juntaba todo para sacar el código.

No sé si te será de ayuda. Un saludo ^_^