@talentsoft-opensource/hylia/molecules/button-download.less

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

.button-download {
    position: relative;

    overflow: hidden;

    height: 3.5rem;

    text-transform: uppercase;

    color: @stormtrooper;
    background-color: darken(@terran, 30%);

    &:before {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        content: "";
        transition: all 1s 0.5s;
        transform: translateX(-101%);

        background-color: @terran;
    }

    &--active {
        & > span {
            position: relative;
            z-index: 2;

            display: inline-block;

            animation: download 0.5s;
        }

        &:before {
            transform: translateX(0) !important;
        }
    }
}

@keyframes download {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}