Buttons like Windows 7 with JS & CSS

Hace rato que estoy usando Windows 7 como sistema operativo principal, y debo decir que APESTA tanto o más que Windows Vista, pero dejando de lado eso, en esta oportunidad les traigo un efecto bastante atractivo inspirándome en la nueva “super barra de tareas” de Windows 7.

El efecto consiste en “una luz que sigue al mouse” mientras lo movemos sobre el botón, algo que no se puede apreciar en la siguiente imagen, pero que si lo podemos hacer con la demo.

21-09-2009 12-57-54 a.m.


6, 7, 8
3.0, 3.5
3
4

Creando la maqueta

La idea es la siguiente:
map

<span class="win7">
  <div></div>
  <a href="#">Button</a>
</span>

Pero para no ensuciar tanto el código HTML que tenemos que crear cada vez que queremos un botón, vamos a crear ese div por medio del javascript, de manera que nuestro código html real será el siguiente:

<span class="win7"><a href="#">Button</a></span>

CSS Code

.win7
{
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
  font-size:12px;

  position:relative;
  float:left;
  height:29px;
  width:100%;
  background:url('../images/nav-bg.png') repeat-x top left;
}

.win7 div
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:29px;
  background:url('../images/active1.png') no-repeat center;
  z-index:0;
}

.win7 a
{
  line-height:29px;
  text-align:center;
  display:block;
  position:relative;
  padding:0 25px;
  z-index:2;
}

Ahora vamos a darle bordes redondeados:

span.win7
{
  width:auto;
  overflow:hidden;

  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;

  border:2px solid #deded2;
}

MooTools code

Iniciamos siempre despues de cargar el dom:

window.addEvent('domready', function() {
Internet Explorer 6 trabaja mal con el background, refrescándolo cada vez que el visitante mueve el mouse. Afortunadamente existe un hack para decirle a IE que “use el cache” y no vuelva a pedir la imagen que ya ha sido cargada:

    if (Browser.Engine.trident4) {
      try { document.execCommand("BackgroundImageCache", false, true); }
      catch(err) {}
    }

Ahora vamos a recorrer el DOM en busca de todos los enlaces con la clase “win7″, y a cada enlace le agregamos el “div” y le asignamos el evento “mousemove” ajustando la posición del background relativo al mouse:

    $$('.win7 a').each(function(el) {

      el.win7BG = new Element('div', {'styles':{'opacity':0}}).injectBefore(el);
      el.win7BG.set('morph', {'duration':300});

      el.addEvent('mousemove', function (ev) {
        el.win7BG.setStyle('background-position', - ((600/2) - (ev.event.layerX||ev.event.offsetX||0))+'px top');
      });

Lo siguiente es para agregarle el efecto “fade”, aunque no es el objetivo principal de este artículo, queda muy bonito:

      el.addEvent('mouseenter', function (ev) {
        el.win7BG.morph({'opacity': 1});
      });

      el.addEvent('mouseout', function (ev) {
        el.win7BG.morph({'opacity': 0});
      });

    }); // end each

}); // end domready

Lo instalamos en nuestra página, agregando el siguiente código en el HEAD:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>

<script type="text/javascript" src="js/win7.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />

(acomoda las rutas a tu conveniencia).

jQuery code

Hacemos lo mismo que en mootools, sólo que con código de jQuery:

$(document).ready(function(){

  if ( document.all && !window.opera && !window.XMLHttpRequest && $.browser.msie ) {
    // stupid jquery ie6 detection
      try { document.execCommand("BackgroundImageCache", false, true); }
      catch(err) {}
  }

  $('.win7 a').each(function() {
    var el = $(this);

    el.win7BG = $(document.createElement('div')).css({'opacity': 0});
    el.win7BG.insertBefore(el);

    el.mousemove(function(ev) {
      el.win7BG.css({'background-position' : -((600/2) - (ev.originalEvent.layerX||ev.originalEvent.offsetX||0))+'px top'});
    });

    el.hover(
      function() {
        el.win7BG.stop().animate({'opacity':1},300);
      },
      function() {
        el.win7BG.stop().animate({'opacity':0},300);
      }
    );

  });
});

Lo instalamos en el HEAD de nuestra página:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/win7.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />

(acomoda las rutas a tu conveniencia).

Creando los Botones y el Menu

Para crear un menu:

<ul class="win7">
  <li><a href="#">Home</a></li>
</ul>

Para crear un botón:

<span class="win7"><a href="#">Button</a></span>

He agregado más clases con diferentes colores que puedes ver en la demo, pero la técnica sigue siendo la misma.

Demo

Puedes ver la demo en mootools como la demo en jQuery.

Este artículo contiene los siguientes archivos:

Julio says:

Hola, muy buen tutorial pero desviándome un poco del tema de JavaScript me podrías decir que tipo de letra usas en tu código?? es Lucida o Consolas?
Gracias y saludos.

diegosoft says:

hola srs, soy un poco novato en esta comunidad aunque en mis web sites utilizo los Sexy Lightbox, y quisiera saber como mostrar en ellos una consulta desde la base de datos.

Gracias.

sanchizu says:

buenos esta pagina vieja amir… lo de 7… apesta tanto¿? jaja, pensar que w$ ya era malo, no he probado esa cosa, esque ya sabes que mi religion lo prohibe. saludos vieja!

Ramon Ocampo says:

Me gusto mucho el efecto de los botones win7

stan says:

LA ETIQUETA SPAN NO PUEDE CONTENER UN DIV ESTA UN POCO FUERA DE LOS ESTANDARES WEB

    Eduardo says:

    1) No grites.
    2) Como poder se puede, como deber es otra cosa. Lo standares son guias, no reglas.

    Este comentario te ha servido? y colabora con el blog
    Reply
Michael says:

Very nice buttons :D

jlmc says:

Hola. buen efecto pero una pregunta… en IE (6 y 7) el efecto de redondeado del boton no sale, soy solo yo??? inclusive el demo tambien me sale cuadrado

Carlos says:

Hola, muy buen codigo, lo estoy usando para una web pero no funciona en IE9, alguien sabe como se podría arreglar?