Şöyle bir görünüm sanırım işinizi çözer. Wordpress olduğunu varsayarak,

Header.php dosyasına,

<!-- header.php'ye eklenecek HTML -->
<div class="gkhn-dev-fixed-menu">
    <ul class="gkhn-dev-menu-list">
        <li class="gkhn-dev-menu-item gkhn-dev-orange">
            <a href="#">
                <svg class="gkhn-dev-icon" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M20 22h-16c-1.1 0-2-.9-2-2v-16c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2v16c0 1.1-.9 2-2 2zm-16-18v16h16v-16h-16zm14 4h-12v2h12v-2zm0 4h-12v2h12v-2zm0 4h-12v2h12v-2z" fill="white"/>
                </svg>
                <span class="gkhn-dev-text">Biz Sizi<br>Arayalım</span>
            </a>
        </li>
        <li class="gkhn-dev-menu-item gkhn-dev-purple">
            <a href="tel:+905XXXXXXXXX">
                <svg class="gkhn-dev-icon" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M6.54 5c.06.89.21 1.76.45 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79h1.51m9.86 12.02c.85.24 1.72.39 2.6.45v1.49c-1.32-.09-2.59-.35-3.8-.75l1.2-1.19M7.5 3H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.49c0-.55-.45-1-1-1-1.24 0-2.45-.2-3.57-.57-.1-.04-.21-.05-.31-.05-.26 0-.51.1-.71.29l-2.2 2.2c-2.83-1.45-5.15-3.76-6.59-6.59l2.2-2.2c.28-.28.36-.67.25-1.02C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1z" fill="white"/>
                </svg>
                <span class="gkhn-dev-text">Hemen<br>Ara</span>
            </a>
        </li>
    </ul>
</div>

Style.css dosyasına,

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

.gkhn-dev-fixed-menu,
.gkhn-dev-fixed-menu * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.gkhn-dev-fixed-menu {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    width: 55px;
}

.gkhn-dev-menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gkhn-dev-menu-item {
    height: 110px;
    display: flex;
    justify-content: center;
}

.gkhn-dev-menu-item a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px 5px;
}

.gkhn-dev-orange {
    background-color: #ff6b6b;
}

.gkhn-dev-purple {
    background-color: #845EC2;
}

.gkhn-dev-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
}

.gkhn-dev-text {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
}

/* Hover efekti */
.gkhn-dev-menu-item:hover {
    transform: translateX(-5px);
    transition: all 0.3s ease;
}

/* Mobil için medya sorgusu */
@media (max-width: 768px) {
    .gkhn-dev-fixed-menu {
        width: 45px;
    }
    
    .gkhn-dev-menu-item {
        height: 100px;
    }
    
    .gkhn-dev-icon {
        width: 20px;
        height: 20px;
    }
    
    .gkhn-dev-text {
        font-size: 12px;
    }
}

Bu şekilde kullanım sağlayabilirsiniz eklentisiz, temiz şekilde.

Plugin olarak isterseniz ya da farklı bir çözüme ihtiyacınız olursa dm yoluyla ulaşabilirsiniz.

GFA Development & Design Studio