Home > Diseño > Diseño web > Tutoriales de diseño web

Cómo hacer un boton web

como hacer un boton para una pagina web

Los botones son un elemento de relativa importancia a la hora de hacer una página web. Vamos a aprender cómo hacer un botón para utilizar en un diseño web.

  Enviar a un amigo
  Añadir a favoritos
  Imprimir

Como hacer un botón

Dibujar botón web con efectos

1. Dibujamos una forma básica con la herramienta rectángulo o rectángulo redondeado, que es la que hemos usado, con un radio de 4px en las esquinas (figura: 1) Aplicamos los efectos de capa que se muestran en la imágen de arriba (para desplegar el panel de efectos de capa, hacemos doble click sobre la capa)(figura: 2):

Sombra paralela: en modo multiplicar, con una opacidad del 7%
Superposición de degradado: en modo luz suave, con un degradado de blanco a negro
Trazo: en modo normal, interior y de 1px de ancho, de un color más oscuro que el botón

Como dar brillo a un botón web

2. Creamos un óvalo de color blanco por encima de nuestro botón (figura:3, se muestra en verde solo para verlo mejor), y se pone en modo luz suave, para darle un toque de brillo al botón web (figura: 4).

Botón con icono y texto

3. Finalmente, escribimos el texto que vaya a ir dentro del botón web (en caso que lo vaya a llevar integrado en la imágen). También se puede dibujar un iconito, por ejemplo un signo”+”, que es muy fácil. El signo “+” lleva un efecto de trazo similar al del botón, pero exterior. (figura: 5)

Para rematar, podemos crear una variación de nuestro botón web, para que al pasar por encima cambie, se ilumine etc... (a: hover). (figura: 6)

Más tutoriales de diseño web: