Botones con css3

Creando Botones con css3

Hola amigos de cómo crear mi web en esta nueva entrada vamos a hablar de los botones con css3, en un mini-tutorial hablamos sobre cómo hacer botones con css pero en aquella ocasión lo hicimos con div y muchos no se lo encontraron bueno por eso, ahora en esta nueva entrada lo que vamos es a crear 5 botones de tipo input bottom que son aquellos que utilizamos normalmente en los formularios.

 

Puedes ver el tema anterior: Botones con css – css3

Son estos botones con css3 compatibles con cualquier navegador.

Cabe resaltar que estos botones con css3 son solo para los navegadores de verdad Chrome, Firefox y algunos otros excepto IE con versiones desactualizadas. Bueno para empezar a crear nuestros primeros botones con css3 lo primero que vamos a necesitar es un documento HTML en el cual vamos a crear nuestro botones.

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Botones con css3</title>
</head>
<body>
<h1>Botones con css3</h1>
<input type="button" value="Boton" id="boton1"/>
<input type="button" value="Boton" id="boton2"/>
<input type="button" value="Boton" id="boton3"/>
<input type="button" value="Boton" id="boton4"/>
<input type="button" value="Boton" id="boton5"/>
</body>
</html>

Si te fijas hemos creado un simple documento HTML en el cual hemos creado 5 input de tipo bottom o pueden ser submit como tú lo prefieras, ahora bien lo que si tienen que tener es un ID para llamarlo desde CSS3 y darle los estilos que queremos en este caso yo le puse como id=”boton” y lo fuy enumerando en 1,2,3,5 respectivamente para referirme a cada uno, pero en caso que vallamos hacer un mismo estilo para todos los botones solo tenemos que ponerle un mismo ID.

Mis primeros botones con css3

Bueno ya vamos a lo que vinimos, para eso vamos a crear nuestro código CSS3 que le dara el estilo que queremos a nuestros botones. Y para eso nos dirigimos al la hoja de estilo css y llamamos al primer botón que tiene el ID boton1.

#boton1{
background:#dadada;
border:solid 1px #dadada;
padding:7px;
width:100px;
text-align:center;
transition:all 2s;
}
#boton1{
border-top-left-radius:20px;
border-bottom-right-radius:20px;
color:#fff;
background:-moz-linear-gradient(#093 0%, #0C0 100%);
background:-webkit-linear-gradient(#093 0%, #0C0 100%);
}
#boton1:hover{
border-top-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
background:-moz-linear-gradient(#0C0 0%, #093 100%);
background:-webkit-linear-gradient(#0C0 0%, #093 100%);
}

Resultado de este codigo en nuestro primer boton.

Botones con css3

Si te fijas lo primero que le hemos indicado al boton1 es que tenga un fondo gris un border de 1px de color gris y que los bordes sean redondos, también le decimos que el tamaño es de 100px y que el contenido del botón se retire a 7px de todos los lados y por ultimo le indicamos que todas las animaciones turen 2 segundos.

Ya este código que creamos nos va a servir de plantilla para los demás botones solo es cuestión de ir cambiando los bordes y el color. Yo en este caso lo modifique todos de la siguiente manera tu puedes darle el estilo que quieras.

Aqui nuestros botones con css3

El código completo para esos botones con css3 es el siguiente.

#boton1,#boton2,#boton3,#boton4,#boton5{
background:#dadada;
border:solid 1px #dadada;
padding:7px;
width:100px;
text-align:center;
transition:all 2s;
}
#boton1{
border-top-left-radius:20px;
border-bottom-right-radius:20px;
color:#fff;
background:-moz-linear-gradient(#093 0%, #0C0 100%);
background:-webkit-linear-gradient(#093 0%, #0C0 100%);
}
#boton1:hover{
border-top-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:10px;
border-top-right-radius:10px;
background:-moz-linear-gradient(#0C0 0%, #093 100%);
background:-webkit-linear-gradient(#0C0 0%, #093 100%);
}
#boton2{
border-top-right-radius:100px;
border-bottom-left-radius:100px;
color:red;
background:-moz-linear-gradient(#CF0 0%, #CF0 100%);
background:-webkit-linear-gradient(#CF0 0%, #CF0 100%);
}
#boton2:hover{
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:100px;
border-top-left-radius:100px;
color:red;
background:-moz-linear-gradient(#CF0 0%, #9F0 100%);
background:-webkit-linear-gradient(#CF0 0%, #CF0 100%);
}
#boton3{
border-top-right-radius:20px;
border-top-left-radius:20px;
color:#FFF;
background:-moz-linear-gradient(#999 0%, #fff 100%);
background:-webkit-linear-gradient(#999 0%, #fff 100%);
}
#boton3:hover{
background:-moz-linear-gradient(#F60 0%, #FC6 100%);
background:-webkit-linear-gradient(#F60 0%, #FC6 100%);
}
#boton4{
border-radius:20px;
color:#FFF;
background:-moz-radial-gradient(#F00 0%, #FF0 100%);
background:-webkit-radial-gradient(#F00 0%, #FF0 100%);
}
#boton4:hover{
background:-moz-linear-gradient(#F90 0%, #F65 100%);
background:-webkit-linear-gradient(#F90 0%, #F65 100%);
}
#boton5{
border-radius:5px;
color:#09F;
background:-moz-linear-gradient(#dadada 0%, #fff 80%);
background:-webkit-linear-gradient(#dadada 0%, #fff 80%);
}
#boton5:hover{
background:-moz-linear-gradient(#fff 0%, #dadada 80%);
background:-webkit-linear-gradient(#fff 0%, #dadada 80%);
}

Bueno espero y te alla gustado esta entrada sobre crear botones con css3 de una forma fácil y rápida y no olvides si deseas pedirnos que hagamos algo por ti sobre programación web no olvides visitar la sesión pide tu entrada..

En el proximo link puedes ver el ejemplo y descargar los archivos

Resultados de Nuestros Botones con CSS3

Un cordial saludo y hasta la próxima..

Comments

  1. By harold

Deja un comentario

Tu dirección de correo electrónico no será publicada.