Bouton onglet en-bas avec animation

Note: Je peux pas tous montrer les effets  en direct et  pour pas  surcharger ma page je fais des screens pour montrer un apercu.

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

<style>

    /* Contenu Global */

    .blog-astuces-container {

        position: fixed;

        bottom: 25px;

        right: 25px;

        z-index: 99999; /* Priorité maximale */

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

    }

    /* Bordure */

    .astuces-bouton-orbite {

        width: 100px;

        height: 100px;

        border: 8px double #C0C0C0; 

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        position: relative;

        animation: spin-magic 10s linear infinite, border-glow 4s infinite alternate;

        box-shadow: 0 0 15px rgba(147, 112, 219, 0.4);

    }

    @keyframes spin-magic {

        from { transform: rotate(0deg); }

        to { transform: rotate(360deg); }

    }

    @keyframes border-glow {

        0% { border-color: #C0C0C0; filter: drop-shadow(0 0 5px #C0C0C0); }

        100% { border-color: #DA70D6; filter: drop-shadow(0 0 12px #9370DB); }

    }

    /* LE BOUTON CENTRAL */

    .astuces-bouton {

        width: 70px;

        height: 70px;

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

        border: 2px solid #E6E6FA;

        border-radius: 50%;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        animation: spin-magic 10s linear infinite reverse;

        z-index: 10;

    }

    .astuces-bouton span { font-size: 32px; filter: drop-shadow(0 0 5px white); pointer-events: none; }

    .label-cliquez { font-size: 8px; color: #E6E6FA; font-weight: bold; margin-top: 2px; pointer-events: none; }

    /* MENU */

    .menu-astuces {

        position: absolute;

        bottom: 125px; 

        right: 0;

        width: 210px;

        background: linear-gradient(135deg, #1e0a32 0%, #4B0082 100%);

        border: 2px solid #C0C0C0;

        border-radius: 15px;

        padding: 12px;

        display: none; 

        flex-direction: column;

        box-shadow: 0 10px 40px rgba(0,0,0,0.8);

    }

    /* Ouverture */

    .menu-astuces.ouvert { 

        display: flex !important; 

        animation: slideIn 0.4s ease-out; 

    }

    

    @keyframes slideIn { 

        from { opacity: 0; transform: translateY(20px); } 

        to { opacity: 1; transform: translateY(0); } 

    }

    .lien-astuce {

        color: #E6E6FA !important;

        text-decoration: none;

        padding: 12px;

        font-size: 14px;

        border-bottom: 1px solid rgba(192, 192, 192, 0.1);

        transition: 0.3s;

    }

    .lien-astuce:hover { background: rgba(230, 230, 250, 0.15); padding-left: 20px; color: #fff !important; }

</style>

<div class="blog-astuces-container">

    <div class="menu-astuces" id="monMenuAstuces">

        <div style="font-size:11px; color:#C0C0C0; text-align:center; margin-bottom:10px; font-weight:bold; letter-spacing:2px;">✦ MENU ✦</div>

        <a href="URL_ACCUEIL" class="lien-astuce">✨ Accueil</a>

        <a href="URL_ASTUCES" class="lien-astuce">📖 Astuces</a>

        <a href="URL_CONTACT" class="lien-astuce">🌙 Contact</a>

    </div>

    <!-- Bouton avec déclencheur direct -->

    <div class="astuces-bouton-orbite" id="declencheur">

        <div class="astuces-bouton">

            <span>📖</span>

            <div class="label-cliquez">OUVRIR</div>

        </div>

    </div>

    

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

</div>

<script>

(function() {

    const menu = document.getElementById("monMenuAstuces");

    const bouton = document.getElementById("declencheur");

    if (bouton) {

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

            e.preventDefault();

            e.stopPropagation();

            menu.classList.toggle("ouvert");

        });

    }

    // Fermer si on clique ailleurs

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

        if (menu && menu.classList.contains("ouvert") && !bouton.contains(e.target) && !menu.contains(e.target)) {

            menu.classList.remove("ouvert");

        }

    });

})();

</script>