Tutorial | Crear un botón con HTML & CSS3



Tutorial | Crear un botón con HTML & CSS3








Cita:

Hola Amigos,, y vi esta info dando vueltas por internet y lo queria publicar aca tambien.. aclaro, el post no es mio ni el tutorial,, solo lo comparto con ustedes..






Lo primero es construir nuestro documento HTML básico con un div el cual le daremos un id llamado "container", no necesito explicar puesto que ya lo hice en el tutorial de crear una web desde cero.

Bien, además entre nuestro div pondremos un link a la palabra Push y le daremos un class aquí el código:
<div id="container">

<a href="#" class="btn">Push</a>

</div>

así nos queda:




Lo siguiente es crear una hoja de estilos yo la e llamado "estilo.css" y la linkeamos a nuestro documento HTML va en cualquier parte entre <head> y </head>:
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />



Una vez que ya tengamos nuestro documento HTML coludido con nuestro css, comenzaremos darle forma al botón.

Abrimos nuestro documento estilo.css y comenzamos a darle un formateo a lo que es la estructura y le damos un color de fondo y una imagen:

body, div {
margin: 0; padding: 0; border: 0;
}

body {
background: #cdcdcd url(bg.png);
}


Ustedes pueden usar cualquier imagen de fondo yo use esta:





Ahora le daremos el tamaño a nuestro botón y márgenes, aparte usaremos la etiqueta block que ya la e explicado en mis otros tutoriales:

a.btn {
display: block; width: 250px; height: 60px;
padding: 40px 0 0 0; margin: 0 auto;
}


Aquí usamos el class siempre para dar por ejemplo una sub orden o estilo se usa el class y en la hoja css se pone ".suestilo" y aparte se lo damos a todos los links "a".



En este paso le damos el estilo del degradado y el color para los viejos navegadores aquí uso comentarios que van en "/* */".

a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

background: #398525; /* viejos navegadores */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
}




Ahora comenzamos a labrar nuestro botón a darle mucha mas forma una cap de como nos esta quedando y como esta quedando el código CSS3:







Lo siguiente es darle los efectos de redondeo una sombra y un pequeño trazo o borde le anexamos el box-shadow propiedad se puede utilizar para crear un efecto de resplandor interno al igual que en photoshop.

Adiciónanos el inset en el código colocará la luz en el interior del elemento, en lugar de hacia el exterior. No vamos a compensar a la sombra de cualquiera de los ejes, pero lo estamos borrando por 6px para suavizar el efecto de flujo, con border se le da un trazo de 1px de color verde el botón, a continuación, las esquinas se eliminan mediante border-radius:

a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

background: #398525; /* viejos navegadores */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
}


Así nos va quedando:





a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

background: #398525; /* viejos navegadores */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;

font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
text-transform: uppercase; text-decoration: none;
color: #147032;
text-shadow: 0px 1px 2px #b4d1ad;
}


Ahora, vamos a modificar la fuente, se configura mediante CSS en forma abreviada, especificando 55 px Helvética en negrita. text-align , text-transform y text-decoration centro el texto, lo convierten en capitales y elimina el subrayado predeterminado se encuentra en los enlaces.
Por último, el color se establece en un color verde oscuro, a continuación, text-shadow se utiliza para crear un efecto de inserción. La sombra de color verde claro se ve compensado por 1px en el eje Y y borrosa por 2px.

Así nos queda después de eso:





Bueno ahora le damos un hover que sirve para que la palabra phush al pasar el puntero cambie de color y se le da un tiempo para que aparezca y desaparezca:

a.btn:hover {
color: #145675;

-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}




Y así nos queda nuestro código CSS3:

a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

background: #398525; /* viejos navegadores */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;

font: bold 55px/25px Helvetica, Sans-Serif; text-align: center;
text-transform: uppercase; text-decoration: none;
color: #147032;
text-shadow: 0px 1px 2px #b4d1ad;

-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}

a.btn:hover {
color: #145675;

-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}




Y así nos queda nuestro botón:







Cita:

Bueno, espero que les haya gustado,, reitero,, el post no es mio, solo lo publico para compartir el tuto y la info..



Creo que es mejor morir de pie, que vivir de rodillas..
Opciones
Estadísticas
Creado 10.12.2013 a las 01:20 hs
Categoría Libros y Tutoriales
  • 4
    Medallas
  • 0
    Favoritos
  • 963
    Visitas
  • 80
    Puntos
  • 0
    Seguidores
Comentarios
9
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Daniel Daniel
Hombre Carbono Member  Mensaje
3,025 29 612
Medallas
4
Recibenos en tu Correo!
rss

Posts relacionados