All geek questions in one place

CSS button animation does not work

I have an animated CSS button configured on my page from this tutorial . A button appears on my page but is not animated. However, when it is out <div id="wrapper">, the rollover animation works, but then I can’t get it where I want on the page. I included the code related to the button from my index.html and style.css, and highlighted the button <div>in my index.html. If you need CSS for a wrapper or basic or any other, let me know and I will 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 am missing, I am stuck on this for several hours :(

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;
}
+4
source share
2 answers

This is not JS, but a CSS issue:

/* 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 again "work" (it works all the time), but the p tags are simply not visible. However, the tags are in the wrong position (aligned left in the container, not in the center). You can fix this either by centering both p-tags inside .downbutton (left: 50%; margin-left: -half-width-of-p -tag) or by centering the .downbutton container itself.

+2
source

Seems to work HERE

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

( ...).

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

Source: https://habr.com/ru/post/1529635/

More articles:


All Articles