我在我的页面上设置了一个来自这个教程的动画CSS按钮。虽然该按钮出现在我的页面上，但却没有动画效果。不过，在
您可以在http://suchryan.com/gtd/#download上看到我的问题的实时版本，以及我想要实现的目标在http://suchryan.com/working/上。
请告诉我我缺少什么，我已经卡在这里几个小时了 :(
index.html
<div id="wrapper">之外时，悬停动画确实有效，但是这样我就无法将其放置在想要的位置上。我已经在我的index.html和style.css中包含了与按钮相关的代码，并在我的index.html中突出显示了该按钮的<div>。如果您需要wrapper或main的CSS，请告诉我，我会尝试找出它们。您可以在http://suchryan.com/gtd/#download上看到我的问题的实时版本，以及我想要实现的目标在http://suchryan.com/working/上。
请告诉我我缺少什么，我已经卡在这里几个小时了 :(
index.html
<!-- Wrapper-->
<div id="wrapper">
<!-- Nav -->
<nav id="nav">
<a href="#me" class="fa fa-info-circle active"><span>File Information</span></a>
<a href="#download" class="fa fa-download"><span>Download File</span></a>
<a href="http://suchryan.com/#work" class="fa fa-arrow-left"><span>Back to Portfolio</span></a>
</nav>
<!-- Main -->
<div id="main">
<!-- Me -->
<article id="me" class="panel">
<header>
<h1>Grab the Diamonds</h1>
<span class="byline">A simple <a href="http://minecraft.net">Minecraft</a> inspired 2D platform game.</span>
</header>
<a href="#download" class="jumplink pic">
<span class="jumplink arrow fa fa-chevron-right"><span>Go To Download</span></span>
<img src="images/me.jpg" alt="" />
</a>
</article>
<!-- Download -->
<article id="download" class="panel">
<header>
<h2>Download the Installer</h2>
</header>
<p>
Grab the Diamonds is a simple 2D platformer that I created in my first year of college. It was written in GLBasic
and is loosely based on the game Minecraft. It is currently unfinished, although I may choose to continue with
it someday. The game is fully functional, yet only the first level is able to be completed as the others are
unfinished. None of the images are compressed, so the file size is quite large (36Mb). A
VirusTotal Scan can be <a href="http://goo.gl/iaTdiY">found here</a> for anybody that is a little skeptical.
</p>
=============== FROM HERE ===============
<div class="downbutton" align="center">
<a href="files/GtD_Installer.exe">Download Me</a>
<p class="top">.exe Application</p>
<p class="bottom">36 MB</p>
</div>
=============== TO HERE ===============
</article>
</div>
style.css
.downbutton
{
width: 200px;
margin: auto;
}
.downbutton a
{
display: block;
height: 50px;
width: 200px;
/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.downbutton a, .downbutton p
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.downbutton p
{
background: #222;
display: block;
height: 40px;
width: 180px;
margin: -50px 0 0 10px;
/*TYPE*/
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
color: #fff;
/*POSITION*/
position: absolute;
z-index: -1;
/*TRANSITION*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
/*HOVER*/
.downbutton:hover .bottom
{
margin: -10px 0 0 10px;
}
.downbutton:hover .top
{
margin: -80px 0 0 10px;
line-height: 35px;
}
/*ACTIVE*/
.downbutton a:active
{
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.downbutton:active .bottom
{
margin: -20px 0 0 10px;
}
.downbutton:active .top
{
margin: -70px 0 0 10px;
}