*Step 1 - Understand What This Effect Does
*
adds a shiny gliding animation over any button using a pseudo-element (::before)
when hovered, animation stops
useful for call-to-action or modern visual style
*Step 2 - Add the CSS to Your Stylesheet or Tag<br> *</em><br> copy the CSS code block exactly as it is</p> <p>you can put it inside your page’s <head> inside a <style> tag, or inside your CSS file<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><style> .bt-btn-shiny { position: relative; overflow: hidden; } .bt-btn-shiny::before { content: ''; position: absolute; width: 100px; height: 100%; background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgb(255 255 255 / 30%), rgba(255, 255, 255, 0) 101%); top: 0; left: -100px; animation: bt-shine 2.8s linear infinite; } .bt-btn-shiny:hover::before { animation: none; } @keyframes bt-shine { 0% { left: -100px } 20% { left: 100% } 100% { left: 100% } } </style> </code></pre></div> <p></p> <p>*<em>Step 3 - Apply the Class to Any Button You Want<br> *</em><br> add bt-btn-shiny class to your <button> or <a> tag</p> <p>it should be combined with your existing button classes if needed<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><button class="bt-btn-shiny">Click Me</button> </code></pre></div> <p></p> <p>*<em>Step 4 - Customize If Needed<br> *</em><br> adjust width: 100px in ::before for wider/narrower shine</p> <p>tweak animation-duration: 2.8s for faster or slower shine</p> <p>edit background-image gradient stops to change shine look</p> <p>to change shine direction, play with linear-gradient() angle</p> <p>Step 5 - Add Extra Styles to Match Your Theme</p> <p>style the button itself with colors, padding, border-radius, etc<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><style> .bt-btn-shiny { position: relative; overflow: hidden; padding: 12px 24px; background: #007bff; color: white; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; } </style> </code></pre></div> <p></p> <p>*<em>Step 6 - Done. Now Test It<br> *</em><br> load your webpage</p> <p>you should see the shining effect move from left to right on your button</p> <p>hover on the button — animation should pause</p> <p>Optional - Apply to Anchor Tag Also</p> <p>works the same on <a> elements<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><a href="#" class="bt-btn-shiny">Get Started</a> </code></pre></div> <p></p> <p>*<em>Optional - Make It Work With Tailwind/Other Frameworks<br> *</em><br> just include bt-btn-shiny alongside your framework’s button classes</p> <p>example: <button class="bt-btn-shiny px-4 py-2 bg-green-600 text-white">Shiny Tailwind</button></p> <p>that's it. you don’t need JS for this, pure CSS does the magic.</p>
Top comments (0)