Shimmer Button
Knop met een glans die continu langs de binnenrand veegt.
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.
<!-- Shimmer Button · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="shimmerbtn-wrap"><button class="shimmerbtn"><span class="shimmerbtn-spark"><span class="shimmerbtn-spark-inner"></span></span><span class="shimmerbtn-label">Shimmer Button</span><span class="shimmerbtn-hl"></span></button></div>
</div>/* Shimmer Button · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.shimmerbtn-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a10}
.shimmerbtn{position:relative;isolation:isolate;cursor:pointer;padding:14px 28px;border:none;border-radius:999px;background:#0a0a0a;color:#fff;font:600 15px 'Switzer',sans-serif;overflow:hidden;transition:transform .2s}
.shimmerbtn:active{transform:translateY(1px)}
.shimmerbtn-spark{position:absolute;inset:0;overflow:visible;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;border-radius:999px}
.shimmerbtn-spark-inner{position:absolute;inset:0;width:100%;height:100%;background:conic-gradient(from 0deg,transparent 0 340deg,#fff 360deg);animation:shimmerbtn-spin 3s linear infinite}
.shimmerbtn-label{position:relative;z-index:1}
.shimmerbtn-hl{position:absolute;inset:0;border-radius:999px;z-index:1;pointer-events:none;box-shadow:inset 0 -8px 10px rgba(255,255,255,.12)}
@keyframes shimmerbtn-spin{to{transform:rotate(1turn)}}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 →