code new button

 <!-- LIBRARY CORNER: PROPER REDIRECT VERSION -->

<div class="lib-wrapper" style="text-align: right; padding-right: 20px; margin-top: 20px;">

    <!-- Animated Button -->

    <button class="lib-animated-btn" onclick="openLib()">

        <i class="fa fa-book"></i> TOP E-BOOKS

    </button>

    <style>

        /* --- Button Animation CSS --- */

        .lib-animated-btn {

            background: #3498db;

            color: white;

            padding: 12px 20px;

            border: none;

            border-radius: 8px;

            cursor: pointer;

            font-weight: bold;

            display: inline-flex;

            align-items: center;

            gap: 8px;

            box-shadow: 0 4px 6px rgba(0,0,0,0.1);

            animation: pulseBtn 2s infinite; /* Any time animation */

            transition: background 0.3s;

        }

        .lib-animated-btn:hover {

            background: #2980b9;

        }

        @keyframes pulseBtn {

            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); }

            50% { transform: scale(1.05); box-shadow: 0 0 15px 10px rgba(52, 152, 219, 0); }

            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }

        }

        /* --------------------------- */

        .lib-overlay {

            display: none; position: fixed; top:0; left:0; width:100%; height:100%;

            background: rgba(0,0,0,0.8); z-index: 10000; justify-content: center; align-items: center;

        }

        .lib-popup {

            background: white; width: 95%; max-width: 450px; padding: 20px; border-radius: 15px;

            position: relative; text-align: center; font-family: 'Segoe UI', sans-serif;

        }

        .lib-close { position: absolute; top: 10px; right: 15px; font-size: 25px; cursor: pointer; color: #666; }

        .lib-item {

            display: flex; align-items: center; justify-content: space-between; 

            background: #ffffff; margin: 12px 0; padding: 8px 12px; border-radius: 10px; 

            text-decoration: none; color: #333; border: 1px solid #eee;

            box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: 0.3s;

        }

        .lib-item:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

        .lib-img-box {

            width: 50px; aspect-ratio: 1 / 1.414; background: #f0f0f0; 

            border-radius: 3px; overflow: hidden; flex-shrink: 0;

        }

        .lib-img-box img { width: 100%; height: 100%; object-fit: cover; }

        .lib-title {

            flex-grow: 1; text-align: left; padding: 0 15px;

            font-size: 14px; font-weight: 600; color: #2c3e50;

        }

        .lib-read-btn {

            width: 50px; height: auto; cursor: pointer; border-radius: 5px;

            transition: 0.2s;

        }

        .lib-read-btn:hover { opacity: 0.8; }

        #libLoader { display: none; padding: 30px; }

        .lib-main-gif { width: 120px; }

    </style>

    <div class="lib-overlay" id="libOverlay">

        <div class="lib-popup">

            <span class="lib-close" onclick="closeLib()">&times;</span>

            

            <div id="libMain">

                <h3 style="margin-top:0; color:#3498db;">Top 3 E-Books</h3>

                

                <!-- Book 1 -->

                <div class="lib-item">

                    <div class="lib-img-box"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kUGF8Mg2sFEy4yIzFtaNwfS4BZstvsqbTvYSSjc7pwBJ35AWuYaC1gggDfgzyV2Bo7dXEPnfaTPldmxtmkL3Z0qokqnz5j_sQj6cdWni-LnBc3wxYDCTssSoqXBm4UjNu5cun6ik-RGt6fhY8sVcvKvlPNPlOoKKwsJYCpuWKdMk2sCwt_1N_VSKduhC/s16000/CHAPTER%201%20%E2%80%94%20When%20the%20Wind%20First%20Touches%20the%20Heart.jpeg" alt="Book 1"></div>

                    <div class="lib-title">Courtroom 302</div>

                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2CkYF1aNzy3gjZ2o9Y2zFg_P6brsmf7zQ1VIrSXIziJ94544FGUPIGUfcn1M2Kph420Oqvi_tNDgZJQPcucmtKAjXlaCZV0rBEwfcAC3c5e1oUn5JstmvKltNZxBarD01GCsZoUKSEXJQXu5E7tGyExUZKgD0fecCSxvAC8H9gETz3Wd0mr1BqJHi7jP/s160/TRENDING.gif" class="lib-read-btn" onclick="startLoading('https://www.maniebook.online/2026/03/courtroom-302.html?m=1')">

                </div>

                <!-- Book 2 -->

                <div class="lib-item">

                    <div class="lib-img-box"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLxn6c_Ho34qNWoZjTwn5jWXc2qo-09yCF-EpmykBELY081su7rndskWls98LzYVwavqVuRJ3o-ZAMTeDeVXZpH-E7gaEg6jmjUB1VxjAsmZclsXMm_OU_I5aWWTDVbWjmgspzR8wqcbjIIBDqQNZeUjx-A1nHW7KKwYp5Gc_W9S8BOeRrcbINRddaRImh/s1748/CHAPTER%201%20%E2%80%94%20When%20the%20Wind%20First%20Touches%20the%20Heart.jpeg" alt="Book 2"></div>

                    <div class="lib-title">खामोशी का बोझ</div>

                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2CkYF1aNzy3gjZ2o9Y2zFg_P6brsmf7zQ1VIrSXIziJ94544FGUPIGUfcn1M2Kph420Oqvi_tNDgZJQPcucmtKAjXlaCZV0rBEwfcAC3c5e1oUn5JstmvKltNZxBarD01GCsZoUKSEXJQXu5E7tGyExUZKgD0fecCSxvAC8H9gETz3Wd0mr1BqJHi7jP/s160/TRENDING.gif" class="lib-read-btn" onclick="startLoading('https://www.maniebook.online/2026/04/khaamoshi-ka-bojh.html?m=1')">

                </div>

                <!-- Book 3 -->

                <div class="lib-item">

                    <div class="lib-img-box"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilsckGjT9DsgZPnYdhF2eE41MsI_cHNWETI8KXsMqQCC3sySnDhXXKOvMoCoyp1fdLfuT5lAuADYZGW_sm7Rr3nMJBxwFre-YAiuMIQHb7iIQSJ-Q4avN9ZMfs_4VrHHpZTd37f365jDGPO7cgYBLQZw0XL_xW0QyC3pH6j6jaMsrDttgvl5-PgraZh_sC/s1748/CHAPTER%201%20%E2%80%94%20When%20the%20Wind%20First%20Touches%20the%20Heart.jpeg" alt="Book 3"></div>

                    <div class="lib-title">शहर सो रहा था</div>

                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2CkYF1aNzy3gjZ2o9Y2zFg_P6brsmf7zQ1VIrSXIziJ94544FGUPIGUfcn1M2Kph420Oqvi_tNDgZJQPcucmtKAjXlaCZV0rBEwfcAC3c5e1oUn5JstmvKltNZxBarD01GCsZoUKSEXJQXu5E7tGyExUZKgD0fecCSxvAC8H9gETz3Wd0mr1BqJHi7jP/s160/TRENDING.gif" class="lib-read-btn" onclick="startLoading('https://www.maniebook.online/2026/04/sahar-soraha-tha.html?m=1')">

                </div>

            </div>

            <!-- Loader View -->

            <div id="libLoader">

                <img src="https://media2.giphy.com/media/v1.Y2lkPTZjMDliOTUyN291NmVsZnE0d2N5ZG82cXlyeWE0bGxpMXZmZW5tcW9kYXN4aDFwbCZlcD12MV9zdGlja2Vyc19zZWFyY2gmY3Q9cw/VfK8uwEgsWawGtsSKO/giphy.gif" class="lib-main-gif">

                <p style="font-weight:bold; color:#555;">Opening Your Book...</p>

            </div>

        </div>

    </div>

    <script>

        const libOverlay = document.getElementById('libOverlay');

        function openLib() {

            libOverlay.style.display = 'flex';

            document.getElementById('libMain').style.display = 'block';

            document.getElementById('libLoader').style.display = 'none';

        }

        function closeLib() {

            libOverlay.style.display = 'none';

        }

        // स्क्रीन पर कहीं भी क्लिक करने पर पॉप-अप बंद करने का लॉजिक

        libOverlay.onclick = function(event) {

            // अगर क्लिक किया गया एलिमेंट "Read More" बटन नहीं है, तो पॉप-अप बंद कर दें

            if (!event.target.classList.contains('lib-read-btn')) {

                closeLib();

            }

        }

        function startLoading(url) {

            // UI Switch: Hide list, show loader

            document.getElementById('libMain').style.display = 'none';

            document.getElementById('libLoader').style.display = 'block';

            

            // Redirect logic

            setTimeout(() => {

                window.location.href = url;

            }, 3000); 

        }

    </script>

</div>