Bouton a onglet horizontal

Remplace ce que jai mis en couleur. mettre le URL du lien avec le titre exemple Accueil  .

Note: Je peux pas tous montrer les effets ^pour pas surcharger ma page pour cette raison je fais des screens . 

 ========= Code creer pour vous  en HTML Javascript  ================

<style>

    .parchemin-prestige-container {

        position: fixed;

        bottom: 30px;

        right: 30px;

        z-index: 999999;

        display: flex;

        align-items: center;

        justify-content: flex-end;

    }

    #papierMagique {

        height: 55px;

        width: 0; 

        background: #E6E6FA; 

        border-top: 4px double #C0C0C0; 

        border-bottom: 4px double #C0C0C0;

        border-left: 12px solid #C0C0C0; 

        border-radius: 10px 0 0 10px;

        display: flex;

        align-items: center;

        overflow: hidden;

        transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s;

        opacity: 0;

        margin-right: -35px;

        box-shadow: -10px 10px 20px rgba(75, 0, 130, 0.2);

        z-index: 5;

    }

    .parchemin-prestige-container.ouvert #papierMagique {

        width: 600px; 

        opacity: 1;

    }

    .liens-zone {

        display: flex;

        align-items: center;

        gap: 30px;

        padding-left: 30px;

        padding-right: 120px; 

        white-space: nowrap;

        /* FONTS */

        font-family: Verdana, Geneva, sans-serif;

    }

 .lien-magique {

        color: #4B0082 !important;

        text-decoration: none !important;

        font-size: 13px; /* Verdana */

        font-weight: bold;

        transition: 0.3s;

    }

    .lien-magique:hover {

        color: #DA70D6 !important;

        transform: translateY(-2px);

    }

    #boutonSceau {

        width: 70px;

        height: 70px;

        background: radial-gradient(circle, #4B0082, #1a0a33);

        border: 2px solid #C0C0C0;

        border-radius: 50%;

        cursor: pointer;

        display: flex;

        align-items: center;

        justify-content: center;

        z-index: 20;

        box-shadow: 0 5px 15px rgba(0,0,0,0.6);

    }

   #boutonSceau::before {

        content: '';

        width: 22px;

        height: 22px;

        background: #C0C0C0; 

        clip-path: polygon(40% 0%, 40% 30%, 100% 30%, 100% 70%, 40% 70%, 40% 100%, 0% 50%);

        transition: transform 0.6s ease, background 0.4s ease;

    }

    .parchemin-prestige-container.ouvert #boutonSceau::before {

        transform: rotate(180deg);

        background: #DA70D6;

    }

</style>

<div class="parchemin-prestige-container" id="monParchemin">

<!-- © 2026 créé par Sorcière Corbeau en collaboration avec AI. -->

    <div id="papierMagique">

        <div class="liens-zone">

            <a href="METTRE_VOTRE_URL_ICI" class="lien-magique"> ⭐Accueil</a>

            <a href="METTRE_VOTRE_URL_ICI" class="lien-magique">⭐Astuces</a>

            <a href="METTRE_VOTRE_URL_ICI" class="lien-magique">☕ Pause Café</a>

            <a href="METTRE_VOTRE_URL_ICI" class="lien-magique">🌙 Contact</a>

        </div>

    </div>

    <div id="boutonSceau" onclick="toggleMenu(event)"></div>

</div>

<script>

    function toggleMenu(event) {

        event.stopPropagation();

        const p = document.getElementById('monParchemin');

        p.classList.toggle('ouvert');

    }

    document.addEventListener('click', function(e) {

        const container = document.getElementById('monParchemin');

        if (container && !container.contains(e.target)) {

            container.classList.remove('ouvert');

        }

    });

</script>