The latest articles on DEV Community by Sourav Pan (@sourav_pan_f2abeb51def1e4). https://dev.to/sourav_pan_f2abeb51def1e4 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1211870%2F8e7e1bb1-8511-4076-885d-1974f6862ae0.png https://dev.to/sourav_pan_f2abeb51def1e4 en Sourav Pan Sat, 19 Jul 2025 06:32:49 +0000 https://dev.to/sourav_pan_f2abeb51def1e4/add-shiny-button-using-pure-css-and-html-5665 https://dev.to/sourav_pan_f2abeb51def1e4/add-shiny-button-using-pure-css-and-html-5665 <p>*<em>Step 1 - Understand What This Effect Does<br> *</em><br> adds a shiny gliding animation over any button using a pseudo-element (::before)</p> <p>when hovered, animation stops</p> <p>useful for call-to-action or modern visual style</p> <p>*<em>Step 2 - Add the CSS to Your Stylesheet or Tag&lt;br&gt; *&lt;/em&gt;&lt;br&gt; copy the CSS code block exactly as it is&lt;/p&gt; &lt;p&gt;you can put it inside your page’s &lt;head&gt; inside a &lt;style&gt; tag, or inside your CSS file&lt;br&gt; &lt;/p&gt; &lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;style&amp;gt; .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% } } &amp;lt;/style&amp;gt; &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt; &lt;p&gt;&lt;/p&gt; &lt;p&gt;*&lt;em&gt;Step 3 - Apply the Class to Any Button You Want&lt;br&gt; *&lt;/em&gt;&lt;br&gt; add bt-btn-shiny class to your &lt;button&gt; or &lt;a&gt; tag&lt;/p&gt; &lt;p&gt;it should be combined with your existing button classes if needed&lt;br&gt; &lt;/p&gt; &lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;button class="bt-btn-shiny"&amp;gt;Click Me&amp;lt;/button&amp;gt; &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt; &lt;p&gt;&lt;/p&gt; &lt;p&gt;*&lt;em&gt;Step 4 - Customize If Needed&lt;br&gt; *&lt;/em&gt;&lt;br&gt; adjust width: 100px in ::before for wider/narrower shine&lt;/p&gt; &lt;p&gt;tweak animation-duration: 2.8s for faster or slower shine&lt;/p&gt; &lt;p&gt;edit background-image gradient stops to change shine look&lt;/p&gt; &lt;p&gt;to change shine direction, play with linear-gradient() angle&lt;/p&gt; &lt;p&gt;Step 5 - Add Extra Styles to Match Your Theme&lt;/p&gt; &lt;p&gt;style the button itself with colors, padding, border-radius, etc&lt;br&gt; &lt;/p&gt; &lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;style&amp;gt; .bt-btn-shiny { position: relative; overflow: hidden; padding: 12px 24px; background: #007bff; color: white; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; } &amp;lt;/style&amp;gt; &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt; &lt;p&gt;&lt;/p&gt; &lt;p&gt;*&lt;em&gt;Step 6 - Done. Now Test It&lt;br&gt; *&lt;/em&gt;&lt;br&gt; load your webpage&lt;/p&gt; &lt;p&gt;you should see the shining effect move from left to right on your button&lt;/p&gt; &lt;p&gt;hover on the button — animation should pause&lt;/p&gt; &lt;p&gt;Optional - Apply to Anchor Tag Also&lt;/p&gt; &lt;p&gt;works the same on &lt;a&gt; elements&lt;br&gt; &lt;/p&gt; &lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;a href="#" class="bt-btn-shiny"&amp;gt;Get Started&amp;lt;/a&amp;gt; &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt; &lt;p&gt;&lt;/p&gt; &lt;p&gt;*&lt;em&gt;Optional - Make It Work With Tailwind/Other Frameworks&lt;br&gt; *&lt;/em&gt;&lt;br&gt; just include bt-btn-shiny alongside your framework’s button classes&lt;/p&gt; &lt;p&gt;example: &lt;button class="bt-btn-shiny px-4 py-2 bg-green-600 text-white"&gt;Shiny Tailwind&lt;/button&gt;&lt;/p&gt; &lt;p&gt;that&amp;#39;s it. you don’t need JS for this, pure CSS does the magic.&lt;/p&gt; </em></p> html css shiny ui