.btn-flip {
    position: relative;
    display: inline-flex;
    width: 180px;
    height: 55px;
    margin: 0 15px;
    perspective: 1000px;
}

/* BTN SOUSCRIRE */
.btn-flip .btn-flip-souscrire {
    font-size: 19px;
    letter-spacing: 1px;
    transform-style: preserve-3d;
    transform: translateZ(-25px);
    transition: transform .25s;
    font-family: 'Montserrat', sans-serif;
}

.btn-flip .btn-flip-souscrire:before, .btn-flip .btn-flip-souscrire:after {
    position: absolute;
    content: "Souscrire";
    height: 55px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #E42178;
    box-sizing: border-box;
    border-radius: 5px;
}

.btn-flip .btn-flip-souscrire:before {
    color: #fff;
    background: #E42178;
    transform: rotateY(0deg) translateZ(25px);
}

.btn-flip .btn-flip-souscrire:after {
    color: #E42178;
    transform: rotateX(90deg) translateZ(25px);
}

.btn-flip .btn-flip-souscrire:hover {
    transform: translateZ(-25px) rotateX(-90deg);
}

/* BTN RECEVOIR UN DEVIS */
.btn-flip .btn-flip-devis {
    font-size: 19px;
    letter-spacing: 1px;
    transform-style: preserve-3d;
    transform: translateZ(-25px);
    transition: transform .25s;
    font-family: 'Montserrat', sans-serif;
}

.btn-flip .btn-flip-devis:before, .btn-flip .btn-flip-devis:after {
    position: absolute;
    content: "Recevoir un devis";
    height: 55px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #080808;
    box-sizing: border-box;
    border-radius: 5px;
}

.btn-flip .btn-flip-devis:before {
    color: #fff;
    background: #080808;
    transform: rotateY(0deg) translateZ(25px);
}

.btn-flip .btn-flip-devis:after {
    color: #080808;
    transform: rotateX(90deg) translateZ(25px);
}

.btn-flip .btn-flip-devis:hover {
    transform: translateZ(-25px) rotateX(-90deg);
}

/* BTN DEVIS SANS EMAIL */
.btn-flip .btn-flip-devis-sans-email {
    font-size: 19px;
    letter-spacing: 1px;
    transform-style: preserve-3d;
    transform: translateZ(-25px);
    transition: transform .25s;
    font-family: 'Montserrat', sans-serif;
}

.btn-flip .btn-flip-devis-sans-email:before, .btn-flip .btn-flip-devis-sans-email:after {
    position: absolute;
    content: "Devis sans email";
    height: 55px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #2e353e;
    box-sizing: border-box;
    border-radius: 5px;
}

.btn-flip .btn-flip-devis-sans-email:before {
    color: #fff;
    background: #2e353e;
    transform: rotateY(0deg) translateZ(25px);
}

.btn-flip .btn-flip-devis-sans-email:after {
    color: #2e353e;
    transform: rotateX(90deg) translateZ(25px);
}

.btn-flip .btn-flip-devis-sans-email:hover {
    transform: translateZ(-25px) rotateX(-90deg);
}

/* BTN DEVIS SANS EMAIL */
.btn-flip .btn-flip-perso-garanties {
    font-size: 19px;
    letter-spacing: 1px;
    transform-style: preserve-3d;
    transform: translateZ(-25px);
    transition: transform .25s;
    font-family: 'Montserrat', sans-serif;
}

.btn-flip .btn-flip-perso-garanties:before, .btn-flip .btn-flip-perso-garanties:after {
    position: absolute;
    content: "Personnaliser mes garanties";
    height: 55px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #969696;
    box-sizing: border-box;
    border-radius: 5px;
}

.btn-flip .btn-flip-perso-garanties:before {
    color: #fff;
    background: #969696;
    transform: rotateY(0deg) translateZ(25px);
}

.btn-flip .btn-flip-perso-garanties:after {
    color: #969696;
    transform: rotateX(90deg) translateZ(25px);
}

.btn-flip .btn-flip-perso-garanties:hover {
    transform: translateZ(-25px) rotateX(-90deg);
}

/* BTN DEVIS PRET */
.btn-flip .btn-flip-perso-pret {
    font-size: 19px;
    letter-spacing: 1px;
    transform-style: preserve-3d;
    transform: translateZ(-25px);
    transition: transform .25s;
    font-family: 'Montserrat', sans-serif;
}

.btn-flip .btn-flip-perso-pret:before, .btn-flip .btn-flip-perso-pret:after {
    position: absolute;
    content: "Recevoir mon devis";
    height: 55px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #E4216A;
    box-sizing: border-box;
    border-radius: 5px;
}

.btn-flip .btn-flip-perso-pret:before {
    color: #fff;
    background: #E4216A;
    transform: rotateY(0deg) translateZ(25px);
}

.btn-flip .btn-flip-perso-pret:after {
    color: #E4216A;
    transform: rotateX(90deg) translateZ(25px);
}

.btn-flip .btn-flip-perso-pret:hover {
    transform: translateZ(-25px) rotateX(-90deg);
}