.btn{
    display: flex;
    position: relative;
    font-family: sans-serif;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-width: 120px;
    border: 2px solid;
    border-radius: 4px;
    z-index: 0;
    overflow: hidden;
    box-shadow: 3px 3px rgba(0, 0, 0, 0);
    transition: all 200ms;
}
.btn.btn-primary{border-color: var(--color_dark); background-color: var(--color_light);}
.btn.btn-primary:hover{box-shadow: 3px 3px rgba(0, 0, 0, 1); transform: translate(-3px , -3px);}
.btn.btn-primary:before{background-color: var(--color_dark);}

.btn.btn-secondary{border-color: var(--color_dark); background-color: var(--color_dark); color: var(--color_light);}
.btn.btn-secondary:hover{background-color: var(--color_primary); box-shadow: 3px 3px rgba(0, 0, 0, 1); transform: translate(-3px , -3px);}
.btn.btn-secondary:before{background-color: var(--color_light);}

.btn.btn-blue{border-color: var(--color_dark); background-color: var(--color_light);}
.btn.btn-blue:hover{box-shadow: 3px 3px rgba(0, 0, 0, 1); background-color: var(--color_primary); color: var(--color_light); transform: translate(-3px , -3px);}
.btn.btn-blue:before{background-color: var(--color_dark);}

.btn.btn-orange{border-color: var(--color_dark); background-color: var(--color_light);}
.btn.btn-orange:hover{box-shadow: 3px 3px rgba(0, 0, 0, 1); background-color: var(--color_orange); color: var(--color_light); transform: translate(-3px , -3px);}
.btn.btn-orange:before{background-color: var(--color_dark);}

.btn.btn-arrow{border: none;}
.btn.btn-arrow span{display: inline-block; transform: translateX(-30px); opacity: 0; transition: all 200ms ease-in;}
.btn.btn-arrow:before{content: ''; position: absolute; width: 60px; height: 20px; background-image: url(../images/icon/long-arrow.png); background-repeat: no-repeat; background-size: contain; transition: all 200ms ease-in;}
.btn.btn-arrow:hover span{transform: translate(0); opacity: 1;}
.btn.btn-arrow:hover:before{transform: translateX(30px); opacity: 0;}