Toca crear 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.
EJEMPLO=
<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>
NOTA IMPORTANTE= En lugar de usar la etiqueta <style> se deben hacer las modificaciones css en un documento aparte .css
TOMADO DE= http://jquery-manual.blogspot.com.co/2013/11/como-dar-estilos-css-un-boton.html
No hay comentarios:
Publicar un comentario