Marquee Hover Button

Knop wisselt op hover naar een doorlopende scrollende tekstband.

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Geen JavaScript nodig.

<!-- Marquee Hover Button · NedDev · eigen werk. -->
<div class="jouw-container">
<button class="mhb-btn"><span class="mhb-label">Bekijk werk</span><span class="mhb-track" aria-hidden="true"><span class="mhb-set">Bekijk werk &bull; Bekijk werk &bull; Bekijk werk &bull; </span><span class="mhb-set">Bekijk werk &bull; Bekijk werk &bull; Bekijk werk &bull; </span></span></button>
</div>

/* Marquee Hover Button · NedDev · eigen werk. */
.mhb-btn{position:relative;overflow:hidden;border:1px solid #0a0a0a;background:#0a0a0a;color:#fff;border-radius:999px;padding:16px 34px;font-family:'Switzer',system-ui,sans-serif;font-size:15px;font-weight:600;cursor:pointer}
.mhb-label{position:relative;z-index:2;transition:opacity .25s,transform .25s}
.mhb-track{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;color:#0a0a0a;background:#F5480F;opacity:0;transform:translateY(100%);transition:opacity .25s,transform .25s;font-weight:700}
.mhb-set{padding-left:.3em;animation:mhb-scroll 6s linear infinite;animation-play-state:paused}
.mhb-btn:hover .mhb-label{opacity:0;transform:translateY(-100%)}.mhb-btn:hover .mhb-track{opacity:1;transform:translateY(0)}.mhb-btn:hover .mhb-set{animation-play-state:running}
@keyframes mhb-scroll{to{transform:translateX(-100%)}}

Meer uit knoppen

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →