https://codepen.io/annelyseNini/pen/JjBbvyN 

css

.floatedButton {
    appearance: none;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: start;
    max-width: 0;
    transition: all ease 2000ms;
    max-width: 3.5em;// rfs-value(56px);
    padding: 0;
    overflow: hidden;
    border-radius:1.875em;
    background: $primary;
    font-size: rfs-value(13px);

    @include media-breakpoint-up(sm) {
        font-size: rfs-value(16px);
    }

    &:hover {
        max-width: 18.75em;
        width: 100%;
        color: #fff;
        background: #365196;
    }

    &__wrapper {
        position: fixed;
        display: flex;
        gap: rfs-value(8px);
        flex-direction: column;
        align-items: flex-end;
        z-index: 999;
        bottom: 2em;
        right: 2em;
    }

    &__btn {
        padding: 0.9em;
        border: none;
        appearance: none;
        font-size: 1.25em;
        line-height: 0;
    }

    &__content {
        margin-left: -1em;
        z-index: 2;

        span {
            padding: 1em; //rfs-value(16px);
            display: block;
            white-space: nowrap;
            font-size: 1em;
        }
    }
}

html

	<div class="floatedButton__wrapper">
		<button class="floatedButton" type="button" data-bs-target="#offCanvasContact"
							data-bs-toggle="offcanvas"
							role="button"
							aria-controls="offCanvasContact">
			<div class="floatedButton__btn">
				<svg class="icon">
					<use xlink:href="#icon-tchat"></use>
				</svg>
			</div>
			<div class="floatedButton__content">
				<span>Discuter avec nous</span>
			</div>
		</button>


		<a class="floatedButton" href="tel:">
			<div class="floatedButton__btn">
				<svg class="icon">
					<use xlink:href="#icon-phone"></use>
				</svg>
			</div>
			<div class="floatedButton__content">
				<span>Appelez-nous</span>
			</div>
		</a>
	</div>

	<svg style="position:absolute; visibility:hidden; height:0px; width:0px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

		
	<symbol id="icon-tchat"  viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M5.07866 8.55394C5.02686 8.22014 4.99999 7.87816 4.99999 7.52995C4.99999 3.84805 8.00439 0.863281 11.7105 0.863281C15.4166 0.863281 18.421 3.84805 18.421 7.52995C18.421 8.36167 18.2677 9.15783 17.9877 9.89204C17.9295 10.0445 17.9004 10.1208 17.8872 10.1803C17.8741 10.2393 17.8691 10.2808 17.8676 10.3412C17.8662 10.4021 17.8745 10.4693 17.891 10.6036L18.2265 13.3287C18.2628 13.6237 18.281 13.7712 18.2319 13.8785C18.1889 13.9724 18.1125 14.0471 18.0176 14.0879C17.9093 14.1345 17.7622 14.1129 17.4681 14.0698L14.8137 13.6807C14.6751 13.6604 14.6058 13.6502 14.5427 13.6506C14.4803 13.6509 14.4371 13.6556 14.376 13.6684C14.3142 13.6814 14.2353 13.7109 14.0775 13.7701C13.3414 14.0458 12.5437 14.1966 11.7105 14.1966C11.362 14.1966 11.0197 14.1702 10.6856 14.1193M6.35967 17.5299C8.83042 17.5299 10.8334 15.4779 10.8334 12.9466C10.8334 10.4153 8.83042 8.36328 6.35967 8.36328C3.88892 8.36328 1.88599 10.4153 1.88599 12.9466C1.88599 13.4554 1.96692 13.9449 2.11631 14.4022C2.17946 14.5955 2.21104 14.6922 2.2214 14.7582C2.23222 14.8272 2.23412 14.8659 2.23009 14.9355C2.22623 15.0023 2.20953 15.0777 2.17614 15.2285L1.66669 17.5299L4.16236 17.1891C4.29857 17.1705 4.36668 17.1612 4.42616 17.1616C4.48879 17.162 4.52203 17.1654 4.58344 17.1777C4.64177 17.1893 4.72849 17.2199 4.90191 17.2811C5.35885 17.4424 5.84928 17.5299 6.35967 17.5299Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
		
		<symbol id="icon-phone" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.38028 8.04964C8.07627 9.49926 9.02506 10.8579 10.2266 12.0595C11.4282 13.2611 12.7869 14.2098 14.2365 14.9058C14.3612 14.9657 14.4235 14.9956 14.5024 15.0186C14.7828 15.1004 15.127 15.0417 15.3644 14.8717C15.4313 14.8238 15.4884 14.7667 15.6027 14.6523C15.9523 14.3027 16.1271 14.1279 16.3029 14.0136C16.9658 13.5827 17.8204 13.5827 18.4833 14.0136C18.6591 14.1279 18.8339 14.3027 19.1835 14.6523L19.3783 14.8472C19.9098 15.3787 20.1755 15.6444 20.3198 15.9298C20.6069 16.4973 20.6069 17.1676 20.3198 17.7351C20.1755 18.0205 19.9098 18.2862 19.3783 18.8177L19.2207 18.9753C18.6911 19.5049 18.4263 19.7698 18.0662 19.972C17.6667 20.1964 17.0462 20.3578 16.588 20.3564C16.1751 20.3552 15.8928 20.2751 15.3284 20.1149C12.295 19.2539 9.43264 17.6294 7.04466 15.2415C4.65668 12.8535 3.03221 9.99112 2.17124 6.95772C2.01103 6.39328 1.93092 6.11105 1.9297 5.69811C1.92833 5.23989 2.08969 4.61939 2.31411 4.21989C2.51636 3.85986 2.78117 3.59504 3.3108 3.06542L3.46843 2.90779C3.99987 2.37634 4.2656 2.11062 4.55098 1.96628C5.11854 1.67921 5.7888 1.67921 6.35636 1.96628C6.64174 2.11062 6.90747 2.37634 7.43891 2.90779L7.63378 3.10266C7.98338 3.45226 8.15819 3.62707 8.27247 3.80284C8.70347 4.46573 8.70347 5.32032 8.27247 5.98321C8.15819 6.15898 7.98338 6.33379 7.63378 6.68339C7.51947 6.7977 7.46231 6.85486 7.41447 6.92167C7.24446 7.1591 7.18576 7.50336 7.26748 7.78372C7.29048 7.86261 7.32041 7.92495 7.38028 8.04964Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
		</div>