Bonus Bar Builder

Bonus Bar Builder


Live Preview
{{HEADLINE}} — {{SUBTEXT}}

Your Code:

<div id="bonusBar" style="font-family:'Playfair Display',serif;background:linear-gradient(90deg,royalblue,magenta);color:gold;padding:0.5rem 0.75rem;position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;align-items:center;justify-content:space-between;animation:pulse 2s infinite;">
  <span><strong>{{HEADLINE}}</strong> — {{SUBTEXT}}</span>
  <div style="display:flex;align-items:center;gap:0.5rem;">
    <a href="{{URL}}" style="padding:0.4rem 0.75rem;background:gold;color:royalblue;text-decoration:none;border-radius:5px;font-weight:bold;" target="_blank">Access Bonus</a>
    <button onclick="document.getElementById('bonusBar').style.display='none';document.getElementById('showBonus').style.display='block';" aria-label="Close" title="Close" style="background:gold;color:royalblue;border:none;font-weight:bold;font-size:1.2rem;border-radius:50%;width:28px;height:28px;cursor:pointer;">×</button>
  </div>
</div>
<div id="showBonus" style="display:none;position:fixed;bottom:10px;right:10px;z-index:9999;">
  <button onclick="document.getElementById('bonusBar').style.display='flex';this.style.display='none';" style="background:gold;color:royalblue;border:none;padding:0.4rem 0.75rem;border-radius:5px;font-weight:bold;">Show Bonus</button>
</div>
If you found this tool helpful, please rate it: