Tecnología y Coaching para Emprendedores

Botones CSS para un Menú de Navegación Estilo Youtube

css

Hoy vamos a aprender a hacer los botones del menú de navegación de Youtube, botones que podemos ver principalmente en el footer de su página web. Son unos botones muy adaptables a muchos tipos de diseños, con lo que con un poco de imaginación, podemos darles un toque personal que se adapten al diseño web en el que estemos trabajando en el momento.

Este artículo es una adaptación del post YouTube Popup Buttons y agradecemos aquí a Chris Coyier que nos permita la traducción de sus contenidos.
 
Este es el resultado que obtendremos de aplicar el código HTML y CSS de los botones de Youtube:

default

boton css youtube

:hover y :focus

boton css youtube

:active


 

Veamos ahora el código:

Código HTML

<button class="button" role="button">
   Button #1
</button>

Código CSS

.button {
   border: 1px solid #DDD;
   border-radius: 3px;
   text-shadow: 0 1px 1px white;
   -webkit-box-shadow: 0 1px 1px #fff;
   -moz-box-shadow:    0 1px 1px #fff;
   box-shadow:         0 1px 1px #fff;
   font: bold 11px Sans-Serif;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: transparent;
   cursor: pointer;
}
.button:hover, .button:focus {
   border-color: #999;
   background: -webkit-linear-gradient(top, white, #E0E0E0);
   background:    -moz-linear-gradient(top, white, #E0E0E0);
   background:     -ms-linear-gradient(top, white, #E0E0E0);
   background:      -o-linear-gradient(top, white, #E0E0E0);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   -webkit-box-shadow: inset 0 1px 2px #aaa;
   -moz-box-shadow:    inset 0 1px 2px #aaa;
   box-shadow:         inset 0 1px 2px #aaa;
   background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
   background:    -moz-linear-gradient(top, #E6E6E6, gainsboro);
   background:     -ms-linear-gradient(top, #E6E6E6, gainsboro);
   background:      -o-linear-gradient(top, #E6E6E6, gainsboro);
}

Ver la demo en la web de CSS Tricks.

Descargar los archivos.

¿Cuáles son tus botones preferidos? Deja un comentario.


Comentarios

  • Josue

     Muy artículo, lástima que no funcionen en IE.

  • Josue Miro

    Perdón, quería decir: Muy buen artículo, lástima que no funciones en IE 7 y 8 de todas maneras, siempre se puede hacer con photoshop y poner las imágenes de background ¿No?

    Un saludo

    • Sandra

      Hola Josue, en si los botones se ven, lo que efectivamente, pierden su encanto. Si quieres que se vean con toda su riqueza visual, has de hacer un sprite para IE, pero yo soy de la opinión que, como los botones se ven, no hacer nada, pues de otro modo estamos incentivando el uso de navegadores antiguos.

  • Maniacode

    Gracias por el recurso ;) La verdad es que me gusta mucho el nuevo diseño de YouTube; muy logrado.

    • Sandra

       sí, a mi también me parece una mejora notable. Gracias por comentar:-)