CSS button animation not working

Question

I've got an animated CSS button set up on my page from this tutorial . The button appears on my page but isn't animated. However, when it is outside <div id="wrapper"> the rollover animation does work, but then I'm unable to get it where I want on the page. I've included the code relevant to the button from both my index.html and style.css, and highlighted the button's <div> in my index.html. If you need the CSS for the wrapper or main or whatever, let me know and I'll try to dig it out.

You can see a live version of my problem at http://suchryan.com/gtd/#download , and what I'm trying to achieve at http://suchryan.com/working/ .

Please let me know what I'm missing, I've been stuck on this for hours now :(

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;
}

Answer 1

This is no JS but a CSS problem:

/* First add the following rules to your .downbutton a style rules */
position: relative; /* so z-index is working */
z-index: 2; /* increase it to 'hide' the additional infos */

/* Second change .downbutton p z-index (currently -1) */
 z-index: 1; /* to set them 'behind' the button but in front of bg */

Now you can already see the p elements and the hover will "work" again (it worked all the time) but the p tags are simply not visible. Still the tags are in the wrong position (left aligned in the container, not centered. You can fix that either by centering the both p tags inside .downbutton (left: 50%; margin-left: -half-width-of-p-tag) or by centering the complete .downbutton container itself.

Answer 2

Seems to be working HERE

Just copied your code to Jsfiddle, and voila its working.

This seems to be missing from your erroneous page(though i'm still trying to solve the problem...).

.downbutton
{
    width: 200px;
    margin: auto;
}