@import url("https://fonts.googleapis.com/css?family=Barlow|Tomorrow:400,700&display=swap");

:root {
    --yellow-color: #fcee09;
    --red-color: #ff003c;
    --black-color: #050a0e;
    --blue-color: #00f0ff;
    --white-color: #fafafa;
}

.btn {
    width: 230px;
    height: 60px;
    border: 0;
    outline: none;
    background-color: var(--black-color);
    cursor: pointer;
    position: relative;
    font-family: Tomorrow, sans-serif;
    font-size: .85rem;
    text-transform: uppercase;
    color: var(--black-color);
    clip-path: polygon(92% 0, 100% 25%, 100% 100%, 8% 100%, 0% 75%, 0 0);
}

.btn__content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-color: var(--yellow-color);
    clip-path: polygon(92% 0, 100% 25%, 100% 100%, 8% 100%, 0% 75%, 0 0);
}

.btn--secondary {
    background-color: var(--white-color);
}

.btn--secondary .btn__content {
    background-color: var(--red-color);
    color: var(--white-color);
}

.btn__label {
    font-size: .40rem;
    position: absolute;
    bottom: -1px;
    right: 8%;
    padding: 0 5px;
    background-color: var(--yellow-color);
    z-index: 3;
    border-left: 1px solid var(--blue-color);
}

.btn--secondary .btn__label {
    background-color: var(--white-color);
    color: var(--black-color);
}

.btn__glitch {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--yellow-color);
    filter: drop-shadow(-2px 3px #67e3f3) drop-shadow(-1px -3px #02d8f3) drop-shadow(2px 1px #02d8f3);
}

.btn--secondary .btn__glitch {
    background-color: var(--red-color);
}

.btn:hover .btn__glitch,
.btn:hover .btn__content::after,
.btn:focus .btn__glitch,
.btn:focus .btn__content::after {
    display: block;
    animation: glitch-animation 2s linear 0s infinite;
}

/* secret trick */
@keyframes glitch-animation {
    0% {
        opacity: 1;
        transform: translateZ(0);
        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }

    2% {
        clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
        transform: translate(-5px);
    }

    6% {
        clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
        transform: translate(5px);
    }

    8% {
        clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
        transform: translate(-5px);
    }

    9% {
        clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
        transform: translate(0);
    }

    10% {
        clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
        transform: translate3d(5px, 0, 0);
    }

    13% {
        clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
        transform: translateZ(0);
    }

    13.1% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        transform: translate3d(5px, 0, 0);
    }

    15% {
        clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
        transform: translate3d(5px, 0, 0);
    }

    20% {
        clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
        transform: translate3d(-5px, 0, 0);
    }

    20.1% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        transform: translate3d(5px, 0, 0);
    }

    25% {
        clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
        transform: translate3d(5px, 0, 0);
    }

    30% {
        clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
        transform: translate3d(-5px, 0, 0);
    }

    30.1% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }

    35% {
        clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
        transform: translate(-5px);
    }

    40% {
        clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
        transform: translate(5px);
    }

    45% {
        clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
        transform: translate(-5px);
    }

    50% {
        clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
        transform: translate(0);
    }

    55% {
        clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
        transform: translate3d(5px, 0, 0);
    }

    60% {
        clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
        transform: translateZ(0);
        opacity: 1;
    }

    60.1% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        opacity: 1;
    }

    to {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        opacity: 1;
    }
}