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

<p>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.</p>

<p>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! </p>

<p>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.</p>

<p>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!</p>

<p>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:</p>

<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 <em>second</em> 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>

carvacodes

Shiny Glinty Button

<div><p>Hover to see the effect</p></div>

havardob

Squishy

coswise

UI // Button Selection Type

Single element 3D button with hover and click effects....

<div><p>Single element 3D button with hover and click effects.</p></div>

kathykato

3D Button

Pure CSS (SCSS) arrow button hover effect....

<div><p>Pure CSS (SCSS) arrow button hover effect.</p></div>

Button Hover

From https://dribbble.com/shots/2012292-Download-transition...

<div><p>From <a href="https://dribbble.com/shots/2012292-Download-transition" target="_blank">https://dribbble.com/shots/2012292-Download-transition</a></p></div>

Buttons using the tag:ui

Buttons using the tag:
ui