¿Cómo cambio el estilo de un botón de formulario HTML?

Al agregar un botón a una página web, se recomienda que use CSS para crear su estilo. El uso de CSS es el método preferido, ya que es una forma más eficiente y organizada de almacenar código de estilo para reutilizarlo en más de un área de su página o sitio. Como puede ver con el siguiente ejemplo, se pueden usar muchos atributos para manipular cada tipo de botón.

Texto CSS para el estilo de los botones.

#submit {background-color: #bbb; relleno: .5em; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 6px; color: #fff; Familia tipográfica: 'Oswald'; tamaño de letra: 20px; texto-decoración: ninguno; frontera: ninguna; } #submit: hover {border: none; fondo: naranja; cuadro de sombra: 0px 0px 1px # 777; }

Código HTML para crear el botón.

Después de que el CSS se haya agregado a la página, se puede aplicar CSS a cualquier botón usando el código en el HTML.

Botón de ejemplo

Ejemplo de botón creado por el CSS.

En el ejemplo anterior, puede ver que cuando el mouse no se desplaza sobre el botón, el botón tiene un fondo gris claro y texto blanco. Cuando el mouse se desplaza sobre el botón, el fondo cambia a naranja. Además, las esquinas del botón están redondeadas en lugar de cuadradas, como un botón de formulario estándar.