@import url('https://fonts.googleapis.com/css?family=Poppins:900i');

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

body {
    height: 100dvh;
    background-color: #f0f0f0;
}

section {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
}

.btn_1 {
    position: relative;
    padding: 15px 30px;
    color: #fff;
    background-color: #0454e8;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bolder;
    font-size: 32px;
    box-shadow: 6px 6px 0 black;
    transform: skewX(-16deg);
    transition: all 0.3s ease;
}

.btn_1:hover {
    background-color: #0056b3;
    box-shadow: 10px 10px 0 yellowgreen;
}

.btn_1 .arrow_container {
    display: inline-block;
    transform: skewX(16deg);
    margin-left: 12px;
    margin-right: 0px;
    position: relative;
    font-weight: lighter;
    transition: all 0.3s ease;
}

.btn_1:hover .arrow_container {
    margin-right: 32px;
}

.arrow:nth-child(2),
.arrow:nth-child(3) {
    position: absolute;
    transform: translateX(-15px);
    transition: all 0.3s ease;
}

.btn_1:hover .arrow {
    scale: 2;
}

.btn_1:hover .arrow:nth-child(1) {
    animation: color_anim 1s infinite 0.1s;
}

.btn_1:hover .arrow:nth-child(2) {
    animation: color_anim 1s infinite 0.4s;
    transform: translateX(2px);
    scale: 1.2;
}

.btn_1:hover .arrow:nth-child(3) {
    animation: color_anim 1s infinite 0.7s;
    transform: translateX(17px);
    scale: 1.4;
}

@keyframes color_anim {
    0% {
        color: white;
    }

    50% {
        color: #FBC638;
    }

    100% {
        color: white;
    }
}


/* <---- SECOND BUTTON ----> */
.btn_2 {
    --anim_time: 0.15s;
    position: relative;
    color: #fff;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bolder;
    font-size: 32px;
}

.btn_2>p {
    z-index: 99;
    padding: 15px 30px;
    background: #e84545;
    transition: all var(--anim_time) ease;
}

.btn_2>span {
    position: absolute;
    top: 0%;
    left: 0%;
    bottom: 0%;
    right: 0%;
    z-index: -2;
    transition: all var(--anim_time) ease;
}

.btn_2>span:nth-child(1) {
    transform: skewX(0) scale(0) rotateZ(50deg);
}
.btn_2>span:nth-child(2) {
    transform: skewX(0) scale(0) rotateZ(-50deg);
}

.btn_2:hover>p {
    transform: skewX(-16deg);
    background: #b33a3a;
}

.btn_2:hover>span:nth-child(1) {
    background-color: blue;
    transform: skewX(32deg) scale(1.1) rotateZ(6deg);
}

.btn_2:hover>span:nth-child(2) {
    border: 2px solid #0056b3;
    transform: skewX(-32deg) scale(1.2) rotateZ(-10deg);
}