A shiny, glinty button! Animated using CSS, with some light extras like a `box-shadow` and some light text glow on hover.  The glint effect (the fast, ...

<div>A shiny, glinty button! Animated using CSS, with some light extras like a <code>box-shadow</code> and some light text glow on hover.

The glint effect (the fast, moving background) is an animated <code>::after</code> element on the main <code>&lt;div&gt;</code>. Nothing too fancy there: the pseudo-element has a linear gradient <code>background-image</code>, and the element's position is animated from a negative <code>left</code> value up 'til it's out of the parent div. Importantly, the parent needs <code>overflow: hidden</code> set in order to prevent its child pseudo-element from being hoverable.

The linear gradient on the border was an interesting case study. My first thought was just to use the normal linear gradient, but set it using the <code>border-image</code> property. That doesn't work! 

A great explanation for this behavior can be found in the MDN Docs: (from <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image#rounded_borders" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/border-image#rounded_borders</a>), but long story short: "background" images applied to borders feature a <code>border-image-outset</code> property that allows you to set a distance from the element's <code>border-box</code> that the background image appears. To enable that behavior, border images must (somewhat obviously) not clip to the border box. Unfortunately, that also means ignoring border radii.

The solution proposed by the MDN doc is to essentially fake it: don't use a border at all. Instead, extend the "actual" element's background to the dimensions you want, including the proposed border. Use two backgrounds: one that contains the border color itself and one that acts as the element's background color. Set the <code>background-origin</code> property to <code>border-box</code> to enable the fake border's gradient to appear in the space the real border would normally occupy, then set <code>background-clip</code> for the element's background to <code>padding-box</code> (to color only the primary element content) and the second background to <code>border-box</code> (to restrict the second background's color to the faked border). Apply a <code>padding</code> to your element: this value defines the thickness of the faked border. Apply a border radius to your element to achieve the rounded effect, and you're in!

Animating the border to shine is as simple as animating the <code>background-position</code> of the second border from a value off the left side of the element to a value off the right side. A few things to note here:

<ul>
<li><code>background-size</code> is set to <code>100% 200%</code> to make sure that the gradient doesn't expose the edges of the background image.</li>
<li>When animating the <code>background-position</code> property, be sure to change only the second background's values (the border background). The first background's values still need to be present, but they should stay the same throughout the animation.</li>
<li>The actual shine gradient coloration only appears over a very small portion of the background image (somewhere around 45% to 55%). Tweaking those values leads to some very satisfying nuance in the image.</li>
</ul></div>

Shiny Glinty Button

You might also like: