SlideShare una empresa de Scribd logo
BOTONES
Tipos y estados de botón para web
ANÁLISIS DEL BOTÓN
• 1. Decidir cuántos botones habrá y la jerarquía entre
ellos: Qué texto contendrá cada uno. Hacer un esquema de que
botones necesitamos y para que
• 2. Definir las cualidades del botón, colores, bordes,
situación del texto…: Todo lo que lleva aparejado el diseño,
teniendo en cuenta su situación.
• 3. Saber cómo se comportara el botón cuando hagamos
hover sobre él y también cuando lo ciclemos: Un botón
tiene distintas posiciones y todas deben ser diseñadas.
ASPECTO DEL BOTON
LAS PALABRAS CLAVES Y POSICIÓN
DISEÑO DEL BOTÓN SEGÚN SUS
CUALIDADES
Es muy importante tener en cuenta
el color de fondo, porque
necesitamos que el botón genere
contraste. Aunque tengamos que
usar un color nuevo, que de
primeras no estuviera entre los
colores corporativos, lo que no
podemos permitir es que no exista
contraste.
Así, debemos tener claro, según las
posiciones que ocupe, si va a ser
relleno o va a tener borde
ESTADOS DE BOTONES
Puede configurar los cuatro estados de botones y guardar el
estado del botón como el nuevo estilo de botón predeterminado
• Los cuatro estados de los botones son: normal , ya que existe
el botón cuando se muestra la página inicial, largo , cuando los
usuarios pasan sus cursores sobre el botón, abajo , cuando se
hace clic en el botón, y desactivado, cuando el botón no esta
activado temporalmente. Para cada estado, puede cambiar el
estilo de la forma, alterar los efectos, y modificar el estilo de
texto.
ESTADOS DE BOTONES

Más contenido relacionado

Similar a BOTONES para diseño grafico de paginas web

Trabajo practico de informaticva n°8
Trabajo practico de informaticva n°8Trabajo practico de informaticva n°8
Trabajo practico de informaticva n°8
Rodrigo_Pastoriza
 
Flashvortex
FlashvortexFlashvortex
Flashvortex
Glenda Proaño
 
Unidad 1 en pp
Unidad 1 en ppUnidad 1 en pp
Unidad 1 en pp
Bertamartinez02
 
Guia boton animacion basica
Guia boton animacion basicaGuia boton animacion basica
Guia boton animacion basica
JOHN BONILLA
 
Formatos e imagenes
Formatos e imagenesFormatos e imagenes
Formatos e imagenes
mario aguirre
 
Práctico n 8
Práctico n 8Práctico n 8
Práctico n 8
AgustinaRosaSoler
 
Manual de microsoft publisher 2007
Manual de microsoft publisher 2007Manual de microsoft publisher 2007
Manual de microsoft publisher 2007
Ashley Stronghold Witwicky
 
Foro numero 5
Foro numero 5Foro numero 5
Foro numero 5
Carlos Beltran Quevedo
 
Slideshare computacion
Slideshare computacion Slideshare computacion
Slideshare computacion
Paul Martínez
 
Practica 7
Practica 7Practica 7
Practica 7
Cindy Gonzalez
 
Practica 7
Practica 7Practica 7
Practica 7
Cindy Gonzalez
 
Practica 7
Practica 7Practica 7
Practica 7
Cindy Gonzalez
 
PRESENTACION DE OFFICE
PRESENTACION DE OFFICEPRESENTACION DE OFFICE
PRESENTACION DE OFFICE
Norelhilary
 
Presentacion de office tic
Presentacion de office ticPresentacion de office tic
Presentacion de office tic
Norelhilary
 
PRESENTACION DE OFFICE
PRESENTACION DE OFFICEPRESENTACION DE OFFICE
PRESENTACION DE OFFICE
Norelhilary
 

Similar a BOTONES para diseño grafico de paginas web (15)

Trabajo practico de informaticva n°8
Trabajo practico de informaticva n°8Trabajo practico de informaticva n°8
Trabajo practico de informaticva n°8
 
Flashvortex
FlashvortexFlashvortex
Flashvortex
 
Unidad 1 en pp
Unidad 1 en ppUnidad 1 en pp
Unidad 1 en pp
 
Guia boton animacion basica
Guia boton animacion basicaGuia boton animacion basica
Guia boton animacion basica
 
Formatos e imagenes
Formatos e imagenesFormatos e imagenes
Formatos e imagenes
 
Práctico n 8
Práctico n 8Práctico n 8
Práctico n 8
 
Manual de microsoft publisher 2007
Manual de microsoft publisher 2007Manual de microsoft publisher 2007
Manual de microsoft publisher 2007
 
Foro numero 5
Foro numero 5Foro numero 5
Foro numero 5
 
Slideshare computacion
Slideshare computacion Slideshare computacion
Slideshare computacion
 
Practica 7
Practica 7Practica 7
Practica 7
 
Practica 7
Practica 7Practica 7
Practica 7
 
Practica 7
Practica 7Practica 7
Practica 7
 
PRESENTACION DE OFFICE
PRESENTACION DE OFFICEPRESENTACION DE OFFICE
PRESENTACION DE OFFICE
 
Presentacion de office tic
Presentacion de office ticPresentacion de office tic
Presentacion de office tic
 
PRESENTACION DE OFFICE
PRESENTACION DE OFFICEPRESENTACION DE OFFICE
PRESENTACION DE OFFICE
 

Más de NikholIk1

el trazo y proporción en dibujo técnico
el trazo y proporción  en dibujo técnicoel trazo y proporción  en dibujo técnico
el trazo y proporción en dibujo técnico
NikholIk1
 
FOTOMONTAJE para iniciantes en Photoshop
FOTOMONTAJE para iniciantes en PhotoshopFOTOMONTAJE para iniciantes en Photoshop
FOTOMONTAJE para iniciantes en Photoshop
NikholIk1
 
tipos de dibujo como lenguaje grafico universal
tipos de dibujo como lenguaje grafico universaltipos de dibujo como lenguaje grafico universal
tipos de dibujo como lenguaje grafico universal
NikholIk1
 
que son los planos arquitectónicos y tipos
que son los planos arquitectónicos y tiposque son los planos arquitectónicos y tipos
que son los planos arquitectónicos y tipos
NikholIk1
 
TEMA 5 LA FIGURA HUMANA inicios de la antropometría
TEMA 5  LA FIGURA HUMANA inicios de la antropometríaTEMA 5  LA FIGURA HUMANA inicios de la antropometría
TEMA 5 LA FIGURA HUMANA inicios de la antropometría
NikholIk1
 
CONSEJOS PARA ARTISTAS DIGITALES. O DISEÑADORES GRAFICOS
CONSEJOS  PARA ARTISTAS DIGITALES.  O DISEÑADORES GRAFICOSCONSEJOS  PARA ARTISTAS DIGITALES.  O DISEÑADORES GRAFICOS
CONSEJOS PARA ARTISTAS DIGITALES. O DISEÑADORES GRAFICOS
NikholIk1
 
proyectos arquitectónicos sobresalientes
proyectos arquitectónicos sobresalientesproyectos arquitectónicos sobresalientes
proyectos arquitectónicos sobresalientes
NikholIk1
 
Recursos tipográficos en el diseño grafico
Recursos tipográficos en el diseño graficoRecursos tipográficos en el diseño grafico
Recursos tipográficos en el diseño grafico
NikholIk1
 

Más de NikholIk1 (8)

el trazo y proporción en dibujo técnico
el trazo y proporción  en dibujo técnicoel trazo y proporción  en dibujo técnico
el trazo y proporción en dibujo técnico
 
FOTOMONTAJE para iniciantes en Photoshop
FOTOMONTAJE para iniciantes en PhotoshopFOTOMONTAJE para iniciantes en Photoshop
FOTOMONTAJE para iniciantes en Photoshop
 
tipos de dibujo como lenguaje grafico universal
tipos de dibujo como lenguaje grafico universaltipos de dibujo como lenguaje grafico universal
tipos de dibujo como lenguaje grafico universal
 
que son los planos arquitectónicos y tipos
que son los planos arquitectónicos y tiposque son los planos arquitectónicos y tipos
que son los planos arquitectónicos y tipos
 
TEMA 5 LA FIGURA HUMANA inicios de la antropometría
TEMA 5  LA FIGURA HUMANA inicios de la antropometríaTEMA 5  LA FIGURA HUMANA inicios de la antropometría
TEMA 5 LA FIGURA HUMANA inicios de la antropometría
 
CONSEJOS PARA ARTISTAS DIGITALES. O DISEÑADORES GRAFICOS
CONSEJOS  PARA ARTISTAS DIGITALES.  O DISEÑADORES GRAFICOSCONSEJOS  PARA ARTISTAS DIGITALES.  O DISEÑADORES GRAFICOS
CONSEJOS PARA ARTISTAS DIGITALES. O DISEÑADORES GRAFICOS
 
proyectos arquitectónicos sobresalientes
proyectos arquitectónicos sobresalientesproyectos arquitectónicos sobresalientes
proyectos arquitectónicos sobresalientes
 
Recursos tipográficos en el diseño grafico
Recursos tipográficos en el diseño graficoRecursos tipográficos en el diseño grafico
Recursos tipográficos en el diseño grafico
 

Último

Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
AMADO SALVADOR
 
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
FranciscoAlbertoPera
 
mapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integradormapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integrador
Richard17BR
 
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptxSEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
CarlosDanielAlanocaT1
 
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
SarahVzquezVsquez
 
MATRIZ DE LINEALIDAD MATEMÁTICA NIVEL SECUNDARIOOO.docx
MATRIZ DE LINEALIDAD MATEMÁTICA NIVEL SECUNDARIOOO.docxMATRIZ DE LINEALIDAD MATEMÁTICA NIVEL SECUNDARIOOO.docx
MATRIZ DE LINEALIDAD MATEMÁTICA NIVEL SECUNDARIOOO.docx
JaviMauricio1
 
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Soleito
 
puentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documentopuentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documento
GuillermoAlejandroCh6
 
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial ValenciaCatalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
AMADO SALVADOR
 
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitecturaEl Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
slaimenbarakat
 
Construcción de una estación de radio en distintas bandas y muy bien explicado.
Construcción de una estación de radio en distintas bandas y muy bien explicado.Construcción de una estación de radio en distintas bandas y muy bien explicado.
Construcción de una estación de radio en distintas bandas y muy bien explicado.
JoseLuisAvalos11
 
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdfPLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
RaquelAntonella2
 
Banderines editables para cumpleaños.pptx
Banderines editables para cumpleaños.pptxBanderines editables para cumpleaños.pptx
Banderines editables para cumpleaños.pptx
CsarGarcs6
 
ETAPAS DE LLITIA LITERATURA PERUANA.pptx
ETAPAS DE LLITIA LITERATURA PERUANA.pptxETAPAS DE LLITIA LITERATURA PERUANA.pptx
ETAPAS DE LLITIA LITERATURA PERUANA.pptx
ruthyeimi937
 
Manual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computoManual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computo
mantenimientofresita
 
Mueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entornoMueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entorno
Artevita muebles
 
soporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computosoporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computo
mantenimientofresita
 
Evolucion del computador para diseño pub
Evolucion del computador para diseño pubEvolucion del computador para diseño pub
Evolucion del computador para diseño pub
ivanna200511
 
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdfguia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
RofoMG
 
metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.
jeanlozano33
 

Último (20)

Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
Catalogo Peronda: Pavimentos y Revestimientos Ceramicos de Calidad. Amado Sal...
 
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
3. PLANOS CONSTRUCTIVOS DE CASA COMUNAL.
 
mapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integradormapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integrador
 
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptxSEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
 
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
 
MATRIZ DE LINEALIDAD MATEMÁTICA NIVEL SECUNDARIOOO.docx
MATRIZ DE LINEALIDAD MATEMÁTICA NIVEL SECUNDARIOOO.docxMATRIZ DE LINEALIDAD MATEMÁTICA NIVEL SECUNDARIOOO.docx
MATRIZ DE LINEALIDAD MATEMÁTICA NIVEL SECUNDARIOOO.docx
 
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...Álbum Collage de Fotos día del padre  polaroid scrapbook  pastel_20240611_040...
Álbum Collage de Fotos día del padre polaroid scrapbook pastel_20240611_040...
 
puentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documentopuentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documento
 
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial ValenciaCatalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
 
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitecturaEl Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
 
Construcción de una estación de radio en distintas bandas y muy bien explicado.
Construcción de una estación de radio en distintas bandas y muy bien explicado.Construcción de una estación de radio en distintas bandas y muy bien explicado.
Construcción de una estación de radio en distintas bandas y muy bien explicado.
 
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdfPLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
 
Banderines editables para cumpleaños.pptx
Banderines editables para cumpleaños.pptxBanderines editables para cumpleaños.pptx
Banderines editables para cumpleaños.pptx
 
ETAPAS DE LLITIA LITERATURA PERUANA.pptx
ETAPAS DE LLITIA LITERATURA PERUANA.pptxETAPAS DE LLITIA LITERATURA PERUANA.pptx
ETAPAS DE LLITIA LITERATURA PERUANA.pptx
 
Manual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computoManual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computo
 
Mueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entornoMueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entorno
 
soporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computosoporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computo
 
Evolucion del computador para diseño pub
Evolucion del computador para diseño pubEvolucion del computador para diseño pub
Evolucion del computador para diseño pub
 
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdfguia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
guia-para-el-diseno-de-parques-locales-accesibles-2023.pdf
 
metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.
 

BOTONES para diseño grafico de paginas web

  • 1. BOTONES Tipos y estados de botón para web
  • 2. ANÁLISIS DEL BOTÓN • 1. Decidir cuántos botones habrá y la jerarquía entre ellos: Qué texto contendrá cada uno. Hacer un esquema de que botones necesitamos y para que • 2. Definir las cualidades del botón, colores, bordes, situación del texto…: Todo lo que lleva aparejado el diseño, teniendo en cuenta su situación. • 3. Saber cómo se comportara el botón cuando hagamos hover sobre él y también cuando lo ciclemos: Un botón tiene distintas posiciones y todas deben ser diseñadas.
  • 4. LAS PALABRAS CLAVES Y POSICIÓN
  • 5. DISEÑO DEL BOTÓN SEGÚN SUS CUALIDADES Es muy importante tener en cuenta el color de fondo, porque necesitamos que el botón genere contraste. Aunque tengamos que usar un color nuevo, que de primeras no estuviera entre los colores corporativos, lo que no podemos permitir es que no exista contraste. Así, debemos tener claro, según las posiciones que ocupe, si va a ser relleno o va a tener borde
  • 6. ESTADOS DE BOTONES Puede configurar los cuatro estados de botones y guardar el estado del botón como el nuevo estilo de botón predeterminado • Los cuatro estados de los botones son: normal , ya que existe el botón cuando se muestra la página inicial, largo , cuando los usuarios pasan sus cursores sobre el botón, abajo , cuando se hace clic en el botón, y desactivado, cuando el botón no esta activado temporalmente. Para cada estado, puede cambiar el estilo de la forma, alterar los efectos, y modificar el estilo de texto.