Aplicar estilos a los botones de tu Web

Mediante CSS podemos aplicar estilos personificados de los botones de nuestra Web. Hay varias técnicas, la que se va a mencionar en este artículo no utiliza imágenes y los nombres de los botones se pueden cambiar fácilmente a través del tag <input>.

Vamos a ver como podemos obtener los resultados de la siguiente imagen:

Para obtener los botones anteriores deberíamos crear unas clases CSS que contengan las sentencias necesarias para poder visualizarlos.

<style>
#submit {
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
    margin: 0 10px 20px 0;
    border: 1px solid #ccc;
    background: #eee;
    border-radius: 8px 8px 8px 8px;
}

#submit:hover {
    background: #ddd;
}
</style>

Como vemos, tenemos una clase llamada «#submit» que se aplicará en aquellos elementos que tengan como id=»submit». También, al pasar el ratón por encima, cambia el fondo del botón de color.

Después en nuestros formularios simplemente deberemos crear los inputs con este mismo id=»submit» de la siguiente forma:

<input type="submit" value="Publicar comentario" id="submit" name="submit">
<input type="reset" value="Cancelar" id="submit" name="submit">

Si no te quedó claro, puedes ver el ejemplo en funcionamiento.