Botones Css

Buenas tardes gente de Cristalab, estoy intentando hacer una pagina con los botones que se encuentran en la siguiente pagina: http://www.templatemonster.com/demo/39677.html , son las que tienen el nombre de Global Solution, Online Support tienen un efecto agradable.. estuve mirando el codigo pero aun no e podido allar el modo de que el efecto me quede igual... cualquier respuesta que me puedan dar les estare agradecido

La animación está hecha con javascript no con css, posiblemente con animate() de jquery, modificando la posición del fondo.

Esta es la función

Código Javascript :

$('header .links li a').append('<span></span>').hover(function(){$(this).stop().animate({backgroundPosition:'0 0',color:'#fff'},{duration:200,queue:false}).find('>span').animate({backgroundColor:'#8d6f1d',marginLeft:0,width:0},{duration:100,queue:false,complete:function(){$(this).animate({backgroundColor:'#242323',marginLeft:-12,width:23},100)}})},function(){$(this).stop().animate({backgroundPosition:'0 -156px',color:'#b9aa81'},{duration:200,queue:false}).find('>span').animate({backgroundColor:'#8d6f1d',marginLeft:0,width:0},{duration:100,queue:false,complete:function(){$(this).animate({backgroundColor:'#f5ba16',marginLeft:-12,width:23},100)}})})

Mil gracias por la respuesta no sabia que era por medio de jquery, el problema esta en q no se como aplicar la funcion de java a ese boton ??? me podria dar una mano

amigo me temo que si quieres utilizar javascript en tus proyectos tendrás que aprender a aprender a programar en dicho lenguaje, yo te puedo ayudar si tienes preguntas, pero no puedo hacer todo el trabajo por ti.

saludos.

Puedes hacerlo con CSS si lo prefieres.
Te recomiendo hacer primero los estilos inicial y final, sin la animación, y cuando lo tengas aplica la transformación.
El :hover se lo aplicas al elemento li (li:hover > etiqueta). Las propiedades que cambian son la posición de la imagen de fondo, el color de letra y la bola del triángulo.

<b>Alivan</b> pero esas propiedades se pueden hacer que se vean bien en todos los navegadores?

adhara web escribió:

Creo que tras este artículo no es necesario explicar más: http://foros.cristalab.com/la-verdad-internet-explorer-6-7-y-8-estan-muertos-t109420/#659734
Si por alguna remota razón alguien con un viejo IE entra a tu web, lo único que no verá será la transición que se realiza, pero sí que funcionará el hover. Pero esos usuarios deben sufrir no viendo totalmente bien las webs por usar un navegador viejo.

Dejo un ejemplo hecho solamente con CSS: http://bit.ly/XAKqqd
Por otro lado, no hay que dejar Javascript de lado. Tampoco quiero decir que se use exclusivamente CSS si es posible. Es importante aprender lo básico del lenguaje en sí y de un framework como jQuery para desenvolverse con ciertas tareas.