Foros del Web » Creando para Internet » Diseño web »

botones

Estas en el tema de botones en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/07/2012, 03:56
viera90
Invitado
 
Mensajes: n/a
Puntos:
botones

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!
  #2 (permalink)  
Antiguo 13/07/2012, 14:07
Avatar de skatomundo  
Fecha de Ingreso: junio-2002
Ubicación: Santiago - CL
Mensajes: 2.532
Antigüedad: 17 años, 3 meses
Puntos: 125
Respuesta: botones

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:
Ver original
  1. .miboton{
  2. width : 100px;
  3. height : 20px;
  4. background-image : url(imagenormal.png);
  5. }
  6.  
  7. .miboton:hover {
  8. background-image : url(imagesobre.png);
  9. }

Código HTML:
Ver original
  1. <a href="http://miserver/mipagina.html" class="miboton">Mi otra pagina</a>

Saludos,
  #3 (permalink)  
Antiguo 13/07/2012, 14:10
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 10 años, 3 meses
Puntos: 641
Respuesta: botones

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:
Ver original
  1. .miboton{
  2.     width : 100px;
  3.     height : 20px;
  4.     background-image : url(boton.png);
  5.     background-position : top right ;
  6. }
  7.      
  8. .miboton:hover {
  9.     background-position : top left;
  10. }

tambien se puede mover en pixeles top, left, right y bottom
  #4 (permalink)  
Antiguo 14/07/2012, 03:38
viera90
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: botones

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

saludos!
  #5 (permalink)  
Antiguo 14/07/2012, 05:09
viera90
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: botones

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!

Última edición por viera90; 14/07/2012 a las 05:27
  #6 (permalink)  
Antiguo 14/07/2012, 08:37
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 10 años, 3 meses
Puntos: 641
Respuesta: botones

imagen con link
Código HTML:
Ver original
  1. <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:
Ver original
  1. .miboton{
  2.     width : 100px;//aqui modifica al ancho de la imagen de tu botón
  3.     height : 20px;//aqui el alto
  4.     background-image : url(boton.png);
  5.     background-position : top right ;
  6.     display:block;//puedes agregar display block si no te respeta las medidas
  7. }

para modificar submit es lo mismo

Código HTML:
Ver original
  1. <input type="submit" class="miboton">

y tomara el css de .miboton
  #7 (permalink)  
Antiguo 14/07/2012, 19:32
Avatar de Jackie_Star  
Fecha de Ingreso: julio-2012
Mensajes: 15
Antigüedad: 7 años, 3 meses
Puntos: 3
Respuesta: botones

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 ^_^

Etiquetas: botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 14:54.