Scribd Logo
Upload

Welcome to Scribd!

  • Easy To Hard Parkour

    Uploaded by

    Me pica El cvlo
    17 views2 pages
    The document contains CSS code that styles buttons for different states of a download process. It defines styles for a base button, an in-progress button that fills with color during download, and a completed button that shows a checkmark icon. Keyframe animation is used to fill the in-progress button from left to right over 3.2 seconds.

    Original Description:

    ....

    Original Title

    Easy to hard parkour

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains CSS code that styles buttons for different states of a download process. It defines styles for a base button, an in-progress button that fills with color during download, and a completed button that shows a checkmark icon. Keyframe animation is used to fill the in-progress button from left to right over 3.2 seconds.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    17 views2 pages

    Easy To Hard Parkour

    Uploaded by

    Me pica El cvlo
    The document contains CSS code that styles buttons for different states of a download process. It defines styles for a base button, an in-progress button that fills with color during download, and a completed button that shows a checkmark icon. Keyframe animation is used to fill the in-progress button from left to right over 3.2 seconds.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <style>/* Global Styling */

    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

    html, body {
    height: 100vh;
    width: 100vw;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Open Sans', sans-serif;
    }

    /* Button */
    .btn {
    background: transparent;
    width: 200px;
    position: relative;
    padding: 15px;
    color: #1ECD97;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
    border-radius: 4px;
    font-weight: 600;
    overflow: hidden;
    border: 2px solid #1ECD97;
    text-decoration: none;
    }

    /* In Progress Button */
    .btn-progress {
    width: 500px;
    color: transparent;
    }

    .btn-fill:after {
    content: '';
    background: #1ECD97;
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0;
    display: block;
    animation: fill 3.2s linear forwards;
    }

    /* Button Complete */
    .btn-complete {
    padding: 10px;
    width: 50px;
    color: #fff;
    pointer-events: none;
    }

    .btn-complete:after {
    font-family: FontAwesome;
    content: "\f00c";
    color: #fff;
    height: 100%;
    padding-left: 3px;
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1ECD97;
    }

    /* Animation */
    @keyframes fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
    }
    </style>
    <a href="https://mega.nz/file/bpU2AboD#kULzTfQz-HFC-KHvvpc9b_hhf9157MWdn5iWcGErkds"
    class='btn'>Download the map!</a>

    You might also like