Bienvenid@s, hoy os mostraré las propiedades CSS fundamentales para que podáis darle vuestros estilos personalizados a los botones de
vuestras páginas web, para ello crearemos una clase llamada "button" y utilizaremos las siguientes propiedades CSS para personalizar el botón ...
border : Para aplicar estilos al borde del botón.
font-size : Para aplicar el tamaño de fuente del botón.
font-family : Para aplicar el tipo de fuente del botón.
padding : Para establecer unos márgenes entre el texto y el borde del botón.
border-radius : Para redondear las esquinas del botón.
background : Para establecer el color de fondo del botón.
color : Para establecer el color del texto del botón.
También utilizaremos el evento :hover para aplicar nuevos estilos cuando se pase el cursor sobre el botón.
DEMO DE LOS BOTONES ...
Código del ejemplo ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Como dar estilos css a un botón</title>
<style>
.button
{
border: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
background: #4972B5;
background: linear-gradient(left, #4972B5, #618ACB);
background: -moz-linear-gradient(left, #4972B5, #618ACB);
background: -webkit-linear-gradient(left, #4972B5, #618ACB);
background: -o-linear-gradient(left, #4972B5, #618ACB);
color: #FFFFFF;
}
.button:hover
{
background: #365D9D;
background: linear-gradient(left, #365D9D, #436CAD);
background: -moz-linear-gradient(left, #365D9D, #436CAD);
background: -webkit-linear-gradient(left, #365D9D, #436CAD);
background: -o-linear-gradient(left, #365D9D, #436CAD);
color: #FFFFFF;
border-color: #FBFFAD;
}
</style>
</head>
<body>
<input type="button" class="button" value="button">
<input type="submit" class="button" value="submit">
<input type="reset" class="button" value="reset">
</body>
</html>
Botón para blogger, botón para blog, estilos CSS a un botón para blogger, estilos CSS botón para Wordpress
No hay comentarios:
Publicar un comentario