lunes, 18 de noviembre de 2013

Como dar estilos css a un botón


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