Bouton couture

Html

<div class="center">
    <div class="column is-3 is-offset-1 contactheader has-text-centered">
        <button class="button">
            <a class="is-color-2" href="tel:+33549540427" title="Appel direct à partir d'un smartphone">
                <span class="icon"><i class="fas fa-phone" aria-hidden="true"></i></span>
                <span class="infobulle" aria-label="Communication directe">05 49 54 04 27</span>
                <div class="button__horizontal"></div>
                <div class="button__vertical"></div>
            </a>
        </button>
    </div>
</div>

CSS

.center {
    margin: 10rem;
}

.infobulle {
    position: relative;
    cursor: help;
}

.infobulle:hover::after, .infobulle:focus::after {
    content: attr(aria-label);
    position: absolute;
    top: -4.4em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    white-space: nowrap;
    padding: 5px;
    background: var(--color-6);
    color: var(--white);
    border-radius: 4px;
    font-size: 0.8rem;
}

.button [aria-label]:hover:before, .button [aria-label]:focus:before {
    content: "";
    position: absolute;
    top: -2em;
    left: 50%;
    transform: translateX(-50%);
    /* on centre horizontalement  */
    font-size: 20px;
    color: var(--color-6);
}

/* pas de contour durant le :focus */
[aria-label]:focus {
    outline: none;
}

/*--------------------------------------------------------------
# Bouton
--------------------------------------------------------------*/
.button {
    --offset: 10px; --border-size: 2px; display: block;
    position: relative;
    appearance: none;
    border: 0;
    background: transparent;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    outline: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 0;
    box-shadow: inset 0 0 0 2px currentcolor;
    transition: background 0.8s ease;
    background: var(--color-8);
    margin: 0 auto;
}

.button:hover {
    background: var(--white);
}

.button__horizontal, .button__vertical {
    position: absolute;
    top: var(--horizontal-offset, 0);
    right: var(--vertical-offset, 0);
    bottom: var(--horizontal-offset, 0);
    left: var(--vertical-offset, 0);
    transition: transform 0.8s ease;
    will-change: transform;
}

.button__horizontal::before, .button__vertical::before {
    content: "";
    position: absolute;
    border: inherit;
}

.button__horizontal {
    --vertical-offset: calc(var(--offset) * -1); border-top: 2px solid currentcolor;
    border-bottom: var(--border-size) solid currentcolor;
}

.buth2 {
    border-bottom: var(--border-size) solid #fff;
    border-top: 2px solid #fff;
}

.button__horizontal::before {
    top: calc(var(--vertical-offset) - var(--border-size));
    bottom: calc(var(--vertical-offset) - var(--border-size));
    left: calc(var(--vertical-offset) * -1);
    right: calc(var(--vertical-offset) * -1);
}

.button:hover .button__horizontal {
    transform: scaleX(0);
}

.button__vertical {
    --horizontal-offset: calc(var(--offset) * -1); border-left: var(--border-size) solid currentcolor;
    border-right: var(--border-size) solid currentcolor;
}

.butv2 {
    border-left: var(--border-size) solid #fff;
    border-right: var(--border-size) solid #fff;
}

.button__vertical::before {
    top: calc(var(--horizontal-offset) * -1);
    bottom: calc(var(--horizontal-offset) * -1);
    left: calc(var(--horizontal-offset) - var(--border-size));
    right: calc(var(--horizontal-offset) - var(--border-size));
}

.button:hover .button__vertical {
    transform: scaleY(0);
}