Cómo estilizar un botón con CSS

Si necesitas páginas web para cualquier necesidad, nosotros podemos hacerla.

Creación de páginas web con el mejor precio / calidad.

Etiqueta html para un botón

La etiqueta button es la que se utiliza para crear un botón en html.

<button>HTML para crear un botón</button>

A nuestro botón solo habrá que agregar style=»mi-boton» en la etiqueta button quedando de ésta forma: <button class=»mi-boton»>Mi botón</button>

¿Por qué personalizar nuestros botones?

Los navegadores agregan sus propios estilos a los botones HTML, es decir, el botón no se verá igual en Chrome, Mozilla u Opera pero nosotros podemos cambiar esos estilos para que queden nuestros botones CSS elegantes.

En el botón podemos escribir una frase corta con el objetivo principal al que queremos que nuestro visitante ponga su atención.

Botón con estilos CSS modificados

Éste es un botón al cual se han modificado y agregado algunos estilos CSS.

Al modificar los estilos CSS de nuestros botones, lograremos integrarlo a nuestro diseño de páginas web dándole el color y tipo de fuente que combine con nuestro diseño web.

Otra ventaja al personalizar botones con CSS es que se verán igual en cualquier navegador, ya sea Chrome, Firefox o cualquier otro navegador.

Código necesario para el botón CSS

	.mi-boton {
	    box-shadow: 1.2px 3px 12px 0px #86182a7d;
	    font-weight: 700;
	    border: none;
	    text-transform: uppercase;
	    font-family: inherit;
	    background-color: #ef3b58;
	    color: #fff;
	    text-decoration: none;
	    padding: 12px 16px;
	    transition: all .7s;
	    border-radius: 7px;
            margin-bottom: 12px;
	}
	.mi-boton:hover, mi-boton:focus {
	    cursor: pointer;
	    background-color: #092232;
	}

Adecuar los estilos del botón a nuestro diseño web

Las herramientas de desarrollo son un excelente auxiliar para modificar los estilos CSS y todos los navegadores cuentan con ellas.

Para utilizarlas en Chrome, solo haz clic con el botón derecho en el botón de tu página web y selecciona inspeccionar. Esto mostrará el código HTML y CSS correspondiente al botón que diseñaste.

En Styles del inspector están las reglas CSS aplicadas a tu botón y si modificas alguna regla notarás que inmediatamente se refleja el cambio en tu botón. La ventaja de trabajar con el inspector es que los cambios solo se verán en el navegador, pero si cometes algún error, solo deberás refrescar la página con F5 y todo volverá a la normalidad; juega con las distintas reglas hasta que estés satisfecho con el resultado

Ya que hayas obtenido el mejor resultado, con el botón derecho del ratón selecciona Copy rule en el inspector y sustituyes los estilos de .mi-boton por los que modificaste, copias y guardas los estilos en css de tu página web y con eso ya estará aplicada esa regla al botón de tu sitio web.

Significado de cada regla CSS utilizada

Puedes cambiar el valor de las reglas las cuales están después de : para modelar el botón a tu gusto.

  • .mi-boton establece las reglas que se aplican a todo el botón.
  • box-shadow crea la sombra del botón.
  • font-weight es el peso de la fuente, negrita, delgada o normal.
  • border establece un borde alrededor del botón. Al colocar en none, se quita ese borde.
  • text-transform puede cambiar el texto a mayúsculas, minúsculas o normal.
  • font-family establece una familia de letras o fuentes ver font-family; al colocar inherit, hereda la fuente utilizada en tu diseño web.
  • background-color se refiere al color de relleno del botón.
  • color se refiere al color de las letras.
  • text-decoration es un subrayado en la frase del botón. Con el valor none se elimina ese subrayado.
  • padding crea un espacio del contenido del botón, hacia los extrmos.
  • transition espacio de tiempo desde que se posa el ratón en el botón hasta que cambia de color.
  • border-radius redondea las esquinas de la caja del botón.

Si crees que este contenido puede ayudar a algún conocido tuyo compártelo: publicitaweb.com/diseno-web/como-estilizar-un-boton-con-css/

Deja un comentario