body {
        --primary: 25,91,255;
        --color: 44, 62, 80;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: #f4f7f8;
        height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
        color: rgb(var(--color));
        width: 100%;
        height: 100vh;
    }
    * {
        list-style: none;
        outline: none;
        padding: 0;
        margin: 0;
        font-family: 'Poppins', sans-serif;
        box-sizing: border-box;
    }
    button {
        padding: 20px 50px;
        font-size: 1.5rem;
        cursor: pointer;
        border: 0px;
        background: transparent;
        position: relative;
        margin: 20px;
        transition: all .25s ease;
    }
    .btn-6 {
        border: 3px solid #000;
        transform: skew(20deg);
        overflow: hidden;
        backface-visibility: hidden;
    }
    .btn-6:hover > span {
        opacity: 0;
        transform: scale(.5);
    }
    .btn-6:hover .effect {
        transform: translate(0);
    }
    .btn-6 .effect {
        position: absolute;
        background: #000;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        color: #fff;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translate(0,-100%);
        transition: all .25s ease;
        backface-visibility: hidden;
    }
    .btn-6 span {
        transform: skew(-20deg);
        display: block;
        transition: all .25s ease;
    }
    .btn-5:hover {
        color: #fff;
    }
    .btn-5:hover::after {
        transform: scale(1);
        opacity: 1;
    }
    .btn-5::after {
        content: '';
        width: 100%;
        height: 100%;
        border-radius: 30px;
        position: absolute;
        top: 0px;
        left: 0px;
        transform: scale(.1);
        background: #000;
        z-index: -1;
        opacity: 0;
        transition: all .25s ease;
    }
    .btn-4 {
        overflow: hidden;
        color: #fff;
        border-radius: 30px;
        box-shadow: 0px -0px 0px 0px rgba(143, 64, 248, .5), 0px 0px 0px 0px rgba(39, 200, 255, .5);
    }
    .btn-4:hover {
        transform: translate(0,-6px);
        box-shadow: 10px -10px 25px 0px rgba(143, 64, 248, .25), -10px 10px 25px 0px rgba(39, 200, 255, .25);
    }
    .btn-4:hover::after {
        transform: rotate(150deg);
    }
    .btn-4::after {
        content: '';
        width: 400px;
        height: 400px;
        position: absolute;
        top: -50px;
        left: -100px;
        background-color: #FF3CAC;
        background-image: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%);
        z-index: -1;
        transition: all .5s ease;
    }

    .btn-3:hover::after {
        width: 100%;
    }

    .btn-3::after {
        content: '';
        position: absolute;
        border-radius: inherit;
        width: 10%;
        height: 5px;
        background: #000;
        left: 0px;
        bottom: 0px;
        z-index: -1;
        transition: all .25s ease;
        left: 50%;
        transform: translate(-50%);
    }

    .btn-2:hover::after {
        transform: translate(-5px, -5px);
    }
    .btn-2:hover::before {
        transform: translate(5px, 5px);
    }
    .btn-2::after,.btn-2::before {
        border: 3px solid #000;
        content: '';
        position: absolute;
        border-radius: inherit;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        left: 0px;
        bottom: 0px;
        z-index: -1;
        transition: all .25s ease;
    }

    .btn-1 {
        background: #000;
        color: #fff;
        border-radius: 30px;
        transition: all .25s ease;
    }
    .btn-1::after,.btn-1::before {
        content: '';
        position: absolute;
        opacity: .3;
        background: #000;
        border-radius: inherit;
        width: 100%;
        height: 100%;
        left: 0px;
        bottom: 0px;
        z-index: -1;
        transition: all .25s ease;
    }
    .btn-1:hover {
        transform: translate(-12px, -12px);
    }
    .btn-1:hover:after {
        transform: translate(6px, 6px);
    }
    .btn-1:hover:before {
        transform: translate(12px, 12px);
    }