Botones con css

#boton1{
background:-moz-linear-gradient(#f9f9f9 0%,#DADADA 100%);
background:-ms-linear-gradient(#f9f9f9 0%,#DADADA 100%);
background:-o-linear-gradient(#f9f9f9 0%,#DADADA 100%);
background:-webkit-linear-gradient(#f9f9f9 0%,#DADADA 100%);
background:linear-gradient(#f9f9f9 0%,#DADADA 100%);
border:solid 1px #DEDEDE;
border-radius:5px;
text-align:center;
padding:5px;
color:#333;
width:75px;
}
#boton1:hover{
background:-moz-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-ms-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-o-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-webkit-linear-gradient(#fff 0%,#DEDEDE 100%);
background:linear-gradient(#fff 0%,#DEDEDE 100%);
color:#999;
}
#boton2{
background:-moz-linear-gradient(#fc0 0%,#F60 100%);
background:-ms-linear-gradient(#fc0 0%,#F60 100%);
background:-o-linear-gradient(#fc0 0%,#F60 100%);
background:-webkit-linear-gradient(#fc0 0%,#F60 100%);
background:linear-gradient(#fc0 0%,#F60 100%);
border:solid 1px #DEDEDE;
border-radius:5px;
text-align:center;
padding:5px;
color:#fff;
width:75px;
}
#boton2:hover{
background:-moz-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-ms-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-o-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-webkit-linear-gradient(#fff 0%,#DEDEDE 100%);
background:linear-gradient(#fff 0%,#DEDEDE 100%);
color:#999;
}
#boton3{
background:-moz-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-ms-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-o-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-webkit-linear-gradient(#fff 0%,#DEDEDE 100%);
background:linear-gradient(#fff 0%,#DEDEDE 100%);
border:solid 1px #DEDEDE;
border-radius:5px;
text-align:center;
padding:5px;
color:#f90;
width:75px;
}
#boton3:hover{
background:-moz-linear-gradient(#f90 0%,#F63 100%);
background:-ms-linear-gradient(#f90 0%,#F63 100%);
background:-o-linear-gradient(#f90 0%,#F63 100%);
background:-webkit-linear-gradient(#f90 0%,#F63 100%);
background:linear-gradient(#f90 0%,#F63 100%);
color:#fff;
padding:8px;
width:100px;
font-size:18px;
text-shadow:0 0 10px #FFF;
-moz-text-shadow:0 0 10px #FFF;
-ms-text-shadow:0 0 10px #FFF;
-o-text-shadow:0 0 10px #FFF;
-webkit-text-shadow:0 0 10px #FFF;
}
#boton4{
background:-moz-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-ms-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-o-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-webkit-linear-gradient(#fff 0%,#DEDEDE 100%);
background:linear-gradient(#fff 0%,#DEDEDE 100%);
border:solid 1px #DEDEDE;
border-radius:5px;
text-align:center;
padding:5px;
color:#f90;
width:75px;
transition:all 2s;
-moz-transition:all 2s;
-ms-transition:all 2s;
-o-transition:all 2s;
-webkit-transition:all 2s;
}
#boton4:hover{
background:-moz-linear-gradient(#f90 0%,#F63 100%);
background:-ms-linear-gradient(#f90 0%,#F63 100%);
background:-o-linear-gradient(#f90 0%,#F63 100%);
background:-webkit-linear-gradient(#f90 0%,#F63 100%);
background:linear-gradient(#f90 0%,#F63 100%);
color:#fff;
padding:8px;
width:100px;
font-size:18px;
text-shadow:0 0 10px #FFF;
-moz-text-shadow:0 0 10px #FFF;
-ms-text-shadow:0 0 10px #FFF;
-o-text-shadow:0 0 10px #FFF;
-webkit-text-shadow:0 0 10px #FFF;
}
#codigo{
background:#999;
padding:5px;
border-radius:5px;
}
#codigo:hover{
padding:10px;
}

Botones con css

En esta nueva entrada vamos a aprender a crear botones con css o css3, y luego vamos a seguir creando un Menú con html5 y css3 con un aspecto dinámico, para empezar lo que vamos a necesitar es un editor de texto para el codigo CSS y HTML, y el interés del lector de aprender a crear botones con css.

Creando nuestro primer botón con css3.

Para crear los botones con css lo primero que tenemos que crear es una hoja de estilo llamada botones.css y un documento HTML en caso que ya lo tengamos creado solo tenemos que enlazar la hoja de estilo a nuestro documento. Para eso te colocas dentro de la etiqueta <head> <head/> y colocas el siguiente código.

<link rel=”stylesheet” href=”botones.css” type=”text/css”>

Con la hoja de estilo ya vinculada entonces nos dirigimos al código HTML donde queremos crear nuestros botones y creamos un div con un id llamado boton1.

<div id=”boton1″>
<a href=”#” title=”Botones con css“>
Seguir
</a>
</div>

Ahora colocamos el código css que le dará el diseño a nuestros botones.

#boton1{

background:-moz-linear-gradient(#f9f9f9 0%,#DADADA 100%);
background:-ms-linear-gradient(#f9f9f9 0%,#DADADA 100%);

background:-o-linear-gradient(#f9f9f9 0%,#DADADA 100%);

background:-webkit-linear-gradient(#f9f9f9 0%,#DADADA 100%);

background:linear-gradient(#f9f9f9 0%,#DADADA 100%);
border:solid 1px #DEDEDE;

border-radius:5px;
text-align:center;
padding:5px;

color:#333;

width:75px;

}

#boton1:hover{
background:-moz-linear-gradient(#fff 0%,#DEDEDE 100%);
color:#999;

}

Resultado de nuestro primer boton con css.

Seguir

Si te fijas el código css es simple aunque le hemos aplicado algunas característica de css3, ahora si quieres seguir creando mas botones del mismo tipo solo tienes que ir agregándole ese id a los div que quieres que se conviertan en botones con ese mismo aspecto.

Ahora vamos a seguir creando mas botones y cambiando algunas líneas de código css, vamos a crear un botón que cambie de color al pasar el mouse por encima, para eso creamos un div con el id boton2.

<div id=”boton2″>
Botones
</div>

Entonces ahora vamos a nuestra hoja de estilo botones.css y crearnos el siguiente código css.

#boton2{

background:-moz-linear-gradient(#fc0 0%,#F60 100%);

background:-ms-linear-gradient(#fc0 0%,#F60 100%);
background:-o-linear-gradient(#fc0 0%,#F60 100%);

background:-webkit-linear-gradient(#fc0 0%,#F60 100%);
background:linear-gradient(#fc0 0%,#F60 100%);
border:solid 1px #DEDEDE;

border-radius:5px;
text-align:center;
padding:5px;

color:#fff;
 
width:75px;
}

#boton2:hover{
background:-moz-linear-gradient(#fff 0%,#DEDEDE 100%);
color:#999;

}

Segundo resultado para botones con css es el siguiente.

Seguir

Crear botones con css3

Ahora imagínate que quieres crear botones con css que al momento de pasar el mouse por encima estos tengan movimiento como que crezcan de tamaño que las letras se cambien de color y se pongan más grandes. Simple estos tipos de botones lo podemos hacer más dinámicos con el uso de CSS3 aunque ya lo hemos utilizado en los botones anteriores.

Vamos a crear un botón con css3 que tenga todas estas características antes mencionada.

Primero creamos nuestro div con un id con el nombre de boton2 y nos dirigimos a nusetra hoja de estilo botones.css y creamos el siguiente codigo css3 que dicho sea de paso es el mismo que los anteriores solo que en este le hemos agregados algunos atributos de css3.

Crear botones dinámicos con css3

Codigo HTML

<div id=”boton3″>
Seguir
</div>

Codigo CSS3

#boton3{

background:-moz-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-ms-linear-gradient(#fff 0%,#DEDEDE 100%);

background:-o-linear-gradient(#fff 0%,#DEDEDE 100%);

background:-webkit-linear-gradient(#fff 0%,#DEDEDE 100%);
background:linear-gradient(#fff 0%,#DEDEDE 100%);
border:solid 1px #DEDEDE;
border-radius:5px;
text-align:center;
padding:5px;
color:#f90;
width:75px;

}

#boton3:hover{
background:-moz-linear-gradient(#f90 0%,#F63 100%);
background:-ms-linear-gradient(#f90 0%,#F63 100%);
background:-o-linear-gradient(#f90 0%,#F63 100%);
background:-webkit-linear-gradient(#f90 0%,#F63 100%);
background:linear-gradient(#f90 0%,#F63 100%);
 
color:#fff;

padding:8px;
width:100px;

font-size:18px;
text-shadow:0 0 10px #FFF;

}

El resultado para nuestro botones con css3 seria el siguiente.

Seguir

Ahora si queremos que la animacion para nuestros botones con css3 sean gradual que no salgan al instante de pasar el mouse por encima lo que tenemos que hacer es agregar el atributo transition de css3. para eso nos colocamos dentro del codigo css3 del boton3 y dentro de la lleve colocamos el siguiente codigo.

transition:all 2s;
-moz-transition:all 2s;
-ms-transition:all 2s;
-o-transition:all 2s;
-webkit-transition:all 2s;

Acuerdate que esto es una linea de codigo css3 solo que la hemos creado para que se pueda ver tanto en firefox,Chrome,Opera y Internet Explorer en versiones mas actualizadas.

Entonces el codigo del boton3 quedaria de la siguiente manera.

#boton3{

background:-moz-linear-gradient(#fff 0%,#DEDEDE 100%);
background:-ms-linear-gradient(#fff 0%,#DEDEDE 100%);

background:-o-linear-gradient(#fff 0%,#DEDEDE 100%);

background:-webkit-linear-gradient(#fff 0%,#DEDEDE 100%);
background:linear-gradient(#fff 0%,#DEDEDE 100%);
border:solid 1px #DEDEDE;
border-radius:5px;
text-align:center;
padding:5px;
color:#f90;

width:75px;

transition:all 2s;
-moz-transition:all 2s;
-ms-transition:all 2s;

-o-transition:all 2s;
-webkit-transition:all 2s;
}
#boton3:hover{

background:-moz-linear-gradient(#f90 0%,#F63 100%);
background:-ms-linear-gradient(#f90 0%,#F63 100%);
background:-o-linear-gradient(#f90 0%,#F63 100%);
background:-webkit-linear-gradient(#f90 0%,#F63 100%);
background:linear-gradient(#f90 0%,#F63 100%);
 
color:#fff;
padding:8px;

width:100px;
font-size:18px;

text-shadow:0 0 10px #FFF;
}

Y el resultado de nuestro de los botones con css que tenga este id aplicado seria el siguiente.

Seguir

Bueno con esto terminamos de crear nuestros botones con css esperamos y te haya gustado el pequeño tutorial será hasta la próxima entrada no olvides darle a +1 si te gusto deja tu comentario o bien puedes pedir un mini-tutorial de algun tema en especifico sobre programacion web en la sesion pide tu entrada.

Ver temas mas actualizado: Botones con CSS3

Gracias y hasta la próxima..

Comments

  1. By Anónimo

  2. By Anónimo

  3. By Anónimo

  4. By Anónimo

  5. By Anónimo

  6. By Anónimo

  7. By Anónimo

Deja un comentario

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