Scribd Logo
Upload

Welcome to Scribd!

  • Glimmer Css

    Uploaded by

    Aya Iya
    20 views1 page
    This CSS code defines styles for a button with a glimmer effect. It positions elements relative to each other and adds an after element with a gradient background that animates from left to right on the button for an infinite looping glimmer effect. Keyframes are used to define the animation from -80% left to 80% right over 5 seconds.

    Original Description:

    2222

    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
    This CSS code defines styles for a button with a glimmer effect. It positions elements relative to each other and adds an after element with a gradient background that animates from left to right on the button for an infinite looping glimmer effect. Keyframes are used to define the animation from -80% left to 80% right over 5 seconds.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    20 views1 page

    Glimmer Css

    Uploaded by

    Aya Iya
    This CSS code defines styles for a button with a glimmer effect. It positions elements relative to each other and adds an after element with a gradient background that animates from left to right on the button for an infinite looping glimmer effect. Keyframes are used to define the animation from -80% left to 80% right over 5 seconds.

    Copyright:

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

    /* Button Glimmer */

    .cfs-btn-glimmer {
    position: relative;
    overflow: hidden;
    }

    .cfs-btn-glimmer:after {
    display: none;
    content: ' ';
    position: absolute;
    top: -50%;
    right: -60%;
    bottom: -50%;
    left: -60%;
    background: linear-gradient(50deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255,
    255, 0.5) 50%, rgba(255, 255, 255, 0) 60%);
    -webkit-transform: translate(-80%, 0px);
    -ms-transform: translate(-80%, 0px);
    transform: translate(-80%, 0px);
    }

    .cfs-btn-glimmer--loop:after {
    display: block;
    animation: 5s cfs-glimmer infinite;
    }

    @keyframes cfs-glimmer {
    0% {
    -webkit-transform: translate(-80%, 0px);
    -ms-transform: translate(-80%, 0px);
    transform: translate(-80%, 0px);
    }

    50% {
    -webkit-transform: translate(80%, 0px);
    -ms-transform: translate(80%, 0px);
    transform: translate(80%, 0px);
    }
    }

    You might also like