chrisgannon

Holo Button

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

havardob

Squishy

From https://dribbble.com/shots/14235925-Hamburger-Menu-Hover-Effect...

<div><p>From <a href="https://dribbble.com/shots/14235925-Hamburger-Menu-Hover-Effect" target="_blank">https://dribbble.com/shots/14235925-Hamburger-Menu-Hover-Effect</a></p></div>

aaroniker

3D Explore Menu (Burger)

stix

Prism Button Effect

Skeuomorphism was used on the earlier iPhones and was made popular by it as well for UI design. It got mostly deprecated by flat design, as skeuomorphi...

<div><p>Skeuomorphism was used on the earlier iPhones and was made popular by it as well for UI design. It got mostly deprecated by flat design, as skeuomorphic elements are harder to create, maintain and scale across different platforms. You will notice, that the style doesn't work out nicely when you change a single color like the background. Play with it, learn what happens and how it is done, but I would not recommend to use it on your website / app. It's 2020 anyway and skeuomorphism is still out, otherwise you should at least wait a couple of years til it's considered vintage, retro and trendy again 💁</p>

<p>Designed for: <a href="https://rgb.wiki/button" target="_blank">https://rgb.wiki/button</a></p>

<p>WiFi icon from typicons: <a href="https://github.com/stephenhutchings/typicons.font" target="_blank">https://github.com/stephenhutchings/typicons.font</a></p></div>

jouanmarcel

Skeuomorphic Buttons (Realistic 3D effect)

3D push buttons with a retro style and font.   The first button is a push button that pushes to the center and tilts left or right based on the cursor'...

<div><p>3D push buttons with a retro style and font. </p>

<p>The first button is a push button that pushes to the center and tilts left or right based on the cursor's location while hovering. It is styled similar to an old-school game console button. These buttons have been configured with a sm, md, lg size classes along with bootstrap-esque classes such as primary, secondary, danger, warning, success and info.</p>

<p>Second button is a loader button with it's own progress bar when pushed. It only pushes in the center, but then opens upwards to show a progress bar on it's front side. It will either show a checkmark or X when finished based on success of action, and it is currently configured in this demo to randomly set the progress over a setInterval. </p>

<p>If you want to sync the progress bar to a real script, just change how the 'progress' variable is calculated in setInterval and use instance._setProgress to update the percentage value on the loader button.</p></div>

b1tn3r

3D Retro Buttons

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

A button you will click more than once  Inspired by: https://dribbble.com/shots/1058143-Elven-iPhone-App-UI-Kit...

<div><p>A button you will click more than once</p>

<p>Inspired by: <a href="https://dribbble.com/shots/1058143-Elven-iPhone-App-UI-Kit" target="_blank">https://dribbble.com/shots/1058143-Elven-iPhone-App-UI-Kit</a></p></div>

nicolasjesenberger

Recreation of the popular shot: http://dribbble.com/shots/457259-Twitter-Button-Concept  Please make sure you go and follow Erik Deiner on Dribbble (ht...

<div><p>Recreation of the popular shot: <a href="http://dribbble.com/shots/457259-Twitter-Button-Concept" target="_blank">http://dribbble.com/shots/457259-Twitter-Button-Concept</a></p>

<p>Please make sure you go and follow Erik Deiner on Dribbble (<a href="http://dribbble.com/deiner" target="_blank">http://dribbble.com/deiner</a>) and Twitter (<a href="https://twitter.com/deiner" target="_blank">https://twitter.com/deiner</a>)</p></div>

Buttons using the tag:3d

Buttons using the tag:
3d