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="https://www.virustotal.com/gui/file/26393fda3d23a060c57006c9fb252a8876373e05eddd05b997f07a7e77666306/detection/f-26393fda3d23a060c57006c9fb252a8876373e05eddd05b997f07a7e77666306-1393721207">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;
}

axel.michel · Accepted Answer · 2014-03-02 10:03:37Z

2

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.

answered Mar 2, 2014 at 10:03

axel.michel

5,8741 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JustRyan Over a year ago

You are a beautiful human being. This worked perfectly. Thank you very much :) Edit: I don't know why it's under JS, oops.

Mohd Abdul Mujib · Accepted Answer · 2014-03-02 10:05:44Z

-1

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

edited Mar 2, 2014 at 10:05

answered Mar 2, 2014 at 9:39

Mohd Abdul Mujib

14.2k8 gold badges73 silver badges93 bronze badges

5 Comments

JustRyan Over a year ago

Hmm. That doesn't have the CSS for any of the other <divs> or the <articles>, and that's why it works at suchryan.com/working. That means the fault is definitely somewhere in those tags. I'll fiddle around a bit more.

JustRyan Over a year ago

I haven't downvoted you :/ I can't even vote on answers yet because I don't have the required rep.

Mohd Abdul Mujib Over a year ago

OK so, no-problem, then maybe some inherited css is overriding it. I'd have to see the actual problem though(and sorry for the caps, seems the forum is going full of trolls and noobs).

JustRyan Over a year ago

No worries. I've two different css files: style.css and desktop-style.css. I've upped them in full along with my index.html to Jsfiddle and pasted the desktop-style.css in the JavaScript section. Link is here: jsfiddle.net/vsb6G if you want to take a look. If not, no problem. I'm sure I'll figure it out eventually :p.

JustRyan Over a year ago

Appreciate it, but there's no need now as axel.michel's solution worked. Thanks for your help anyway :)

Collectives™ on Stack Overflow

CSS button animation not working

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related