Me parece que tu problema, realmente no existe. Tú como dices, has hecho todos los pasos. Pero lo que se le olvida comentar al creador dl tuto es el uso final de esa imagen. Realmente no es una "animación " tal y como se describe. Si le hechas uns vistazo al código del ejemplo, verás que se una javascript para definir una acción, por eso cuando pasamos el ratón por encima del button, este reacciona haciendo el degradado de gris oscuro a gris claro. Para poder probarlo tendrías que poner código javascript en tu página.
Primero, en el HEAD debes añadir la función del script:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Luego donde quieras colocar el botón has de poner:
<a href="javascript
:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image34','','animated_b utton/fadeout02_over.gif',1)" onFocus="if(this.blur)this.blur()"><img src="animated_button/fadeout02_up.gif" alt="" name="Image34" width="128" height="47" border="0"></a>
Primero estás definiendo cual serán las funciones de: 1.- Pasar el puntero por encima del botón, 2.- levantar el puntero de encima del botón.
Luego sólo pones el código dónde quieras colocar la imagen.
En teoría así debe de funcionar, sólo haz de cambiar la ruta de la imagen y el destino del link.
Saludos. Y si tienes alguna duda con javascript, siempre puedes visitar los foros de JavaScript de Foros del Web, sin irnos más lejos.