Design(e)-moi un bouton

 <ul class="grid-layout grid-1-3-5 has-gutter padded">
    <!-- Bouton "classique" -->
    <li class="flex-center padded">
        <!-- Le bouton  -->
        <h4>Classique</h4>
        <a class="btn" href="#">BOUTON</a>
    </li>
  
    <!-- Bouton "Call-to-Action" -->
    <li class="flex-center padded">
        <!-- Le bouton  -->
        <h4>Call to Action</h4>
        <a class="btn is-cta" href="#">BOUTON</a>
    </li>

    <!-- Bouton "Arrondi" -->
    <li class="flex-center padded">
        <!-- Le bouton  -->
        <h4>Arrondi</h4>
        <a class="btn is-rounded" href="#">BOUTON</a>
    </li>

    <!-- Bouton "Circulaire" -->
    <li class="flex-center padded">
        <!-- Le bouton  -->
        <h4>Circulaire</h4>
        <a class="btn is-circular-xs" href="#">
            <b>+</b>

            <span class="dsp-none">BOUTON</span>
        </a>
    </li>

    <!-- Bouton "Outline" -->
    <li class="flex-center padded">
        <!-- Le bouton  -->
        <h4>Outline</h4>
        <a class="btn is-outline" href="#">BOUTON</a>
    </li>

    <!-- Bouton "Outline Light" -->
    <li class="flex-center padded color-1">
        <!-- Le bouton  -->
        <h4 class="txt-color-5">Outline Light</h4>
        <a class="btn is-outline-white" href="#">BOUTON</a>
    </li>
  
</ul>
 

 /* BOUTONS */

/* Apparence PAR DEFAUT */
.btn {
    position: relative;
    z-index: 1;
    display: inline-block;
    background-color: var(--color-3); /* couleur du bouton : idem liens */
    color: var(--color-txt-btn); /* blanc */
    text-decoration: none;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: .5rem 1.5rem;
    outline: 0 none!important;
    border: none;
    overflow: hidden;

    transition: .25s;   
}

/* Bouton AU SURVOL */
.btn:hover {
    /* background-color: var(--color-4)!important; /* couleur des liens survolés */
    color: var(--color-txt-btn); /* blanc */
    /* opacity: .85; */
    transition: .25s;
    
}

/* Bouton circulaire */
.is-circular-xs {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    padding: 0;
    font-size: 1.5rem;
    border-radius: 50%;
    text-align: center;
}

/* Icônes .fa dans les boutons circulaires */
.is-circular-xs .fa,
.is-circular-xs .fas {
    font-size: 1.25rem;
}

/* Arrondi  */
.is-rounded {
    border-radius: 2.5rem; /* Arrondi ? */
}

/* Bouton "Fat" */
.is-large {
    width: 150px; /* Empirique */
}

/* Bouton "Outline" */
.is-outline {
    background-color: transparent;
    border: 1px solid var(--color-3);
    color: var(--color-3);
    transition: .25s;
}

/* Bouton "Outline" White */
.is-outline-white {
    background-color: transparent;
    border: 1px solid var(--color-txt-btn);
    color: var(--color-txt-btn);
    transition: .25s;
}

.is-outline:hover,
.is-outline-white:hover {
    background-color: var(--color-4);
    border-color: var(--color-4);
    opacity: 1;
    transition: .25s;
}

/* Bouton "Call-to-Action" */
.is-cta {
    background: var(--gradient-yellow-red);
    box-shadow: var(--red-shadow);
    transition: .25s;
}

.is-cta::before {
    background: var(--gradient-yellow-red);
}

.is-cta:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0); /* transparent  */
    box-shadow: var(--yellow-shadow);
    transition: .25s;
}