Um banner animado com botao ver agora

<div id="noctis-banner-wrapper"> <div class="banner-container" id="noctis-banner"> <div class="text-overlay">✨ DESCUBRA HISTÓRIAS ✨</div> <div class="character-box"> <svg viewBox="0 0 120 140" width="100%" height="100%"> <path d="M 20 50 Q 20 20 60 15 Q 100 20 100 50" fill="#2c1810" /> <ellipse cx="60" cy="70" rx="38" ry="42" fill="#f4c9a8" /> <ellipse cx="40" cy="60" rx="14" ry="20" fill="white" stroke="#2c1810" stroke-width="1.5" /> <ellipse cx="40" cy="65" rx="9" ry="14" fill="#4a90e2" /> <ellipse id="p-l" cx="40" cy="68" r="5" fill="#000" /> <circle cx="42" cy="65" r="2.5" fill="white" opacity="0.8" /> <ellipse cx="80" cy="60" rx="14" ry="20" fill="white" stroke="#2c1810" stroke-width="1.5" /> <ellipse cx="80" cy="65" rx="9" ry="14" fill="#4a90e2" /> <ellipse id="p-r" cx="80" cy="68" r="5" fill="#000" /> <circle cx="82" cy="65" r="2.5" fill="white" opacity="0.8" /> <path d="M 28 48 Q 40 42 50 45" fill="none" stroke="#2c1810" stroke-width="2.5" stroke-linecap="round" /> <path d="M 70 45 Q 80 42 92 48" fill="none" stroke="#2c1810" stroke-width="2.5" stroke-linecap="round" /> <path id="m-n" d="M 48 95 Q 60 105 72 95" fill="none" stroke="#d97a7a" stroke-width="2.5" stroke-linecap="round" /> <circle cx="25" cy="80" r="6" fill="#ffb3ba" opacity="0.6" /> <circle cx="95" cy="80" r="6" fill="#ffb3ba" opacity="0.6" /> <path d="M 50 117 L 35 140 L 85 140 L 70 117 Z" fill="#667eea" /> </svg> </div> <a href="https://noctis-livraria-digital.blogspot.com/" class="cta-button" target="_blank">VER AGORA</a> </div> <style> #noctis-banner-wrapper .banner-container { position: relative; width: 300px; height: 250px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100% ); border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-around; box-shadow: 0 10px 30px rgba(0,0,0,0.3); cursor: pointer; transition: transform 0.3s ease; font-family: sans-serif; margin: 10px auto; } #noctis-banner-wrapper .text-overlay { color: white; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.4); } #noctis-banner-wrapper .character-box { width: 130px; height: 130px; animation: n-float 3s ease-in-out infinite; } @keyframes n-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } #noctis-banner-wrapper .cta-button { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border: none; padding: 12px 35px; font-size: 16px; font-weight: bold; border-radius: 50px; text-decoration: none; box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4); transition: 0.3s; } #noctis-banner-wrapper .cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(245, 87, 108, 0.6); } </style> <script> (function() { const b = document.getElementById('noctis-banner'); const pl = document.getElementById('p-l'), pr = document.getElementById('p-r'), m = document.getElementById('m-n'); b.addEventListener('mousemove', (e) => { const r = b.getBoundingClientRect(); const x = ((e.clientX - r.left) / r.width - 0.5) * 8, y = ((e.clientY - r.top) / r.height - 0.5) * 8; pl.setAttribute('transform', `translate(${x},${y})`); pr.setAttribute('transform', `translate(${x},${y})`); }); b.addEventListener('mouseenter', () => m.setAttribute('d', 'M 48 90 Q 60 100 72 90')); b.addEventListener('mouseleave', () => { pl.setAttribute('transform', 'translate(0,0)'); pr.setAttribute('transform', 'translate(0,0)'); m.setAttribute('d', 'M 48 95 Q 60 105 72 95'); }); })(); </script> </div>