Some button styles in .scss

_button.scss

.button-custom {
    display: inline-block;
    background: transparent;
    color: white;
    text-transform: uppercase;
    padding: 5px 35px;
    font-size: 16px;
    font-family: "Roboto", Sans-serif;
    font-weight: 500;
    position: relative;
    transition: .5s all ease;
    z-index: 3;

    @include mobile {
        padding: 3px 20px;
        font-size: 13px;
    }


    &:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: $red;
        z-index: -1;
        transition: .5s all ease;
    }

    &:after {
        content: "";
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: blue;
        border: 2px $red solid;
        display: block;
        background: transparent;
        position: absolute;
        z-index: -2;
        transform: translateX(7px) translateY(7px);
        transition: .5s all ease;
    }

    &:hover {
        &:before {
            background: darken($red, 10%);
        }

        &:after {
            background: rgba($red, 0.3);
            transform: translateX(10px) translateY(10px);
            border-color: transparent;
        }
    }
}