Pure CSS 3D Imageless Button with Animation Effects – No JS

Hey everyone, today I have a special treat for anyone that would like to add a touch of realistic 3d-ish-ness to any sales page, blog post, or really any page that needs an awesome button.

I’ve use this button code on most of my sales pages, and also inside of ProfitCanvas throughout the UI.  It really ads a touch of professionalism because when you hover over, it looks as if the button is really raising up off of the page, with the proper shadowing as well.. and then when clicked it looks as if it’s really being pressed down into the page.

The best part of it all is that it’s all CSS-based!  No javascript or images required, unless you want to add a cool button background texture or button icon, like in my example below.

For this example I’m using an optional background texture and button gloss image for an extra bit of flare, but again it’s totally optional if you use images or not for your new super awesome 3D button.

Check out this button right below this text, to see how it looks and works, and to see the animation effects in real time.

3D CSS Button Example:

HOVER & CLICK TO SEE EFFECTS

HTML:

<a href="" class="lm-buybutton">HOVER & CLICK TO SEE EFFECTS</a>

CSS:

.lm-buybutton { position: relative; z-index: 200; padding:20px 70px; font-size:40px; box-shadow: 0 -5px 0 rgba(0,0,0,0.3) inset,  0 5px 1px rgba(0,0,0,0.2); font-weight:normal; font-family:Anton; text-transform:uppercase; color:#FFF; text-shadow:1px 1px 0px rgba(0,0,0,0.4); background:url(http://www.joshkatherman.com/wp-content/uploads/2016/07/bglines-medium.png) repeat #ebad07; transition:0.3s; text-align:center; display:block; cursor:pointer; text-align:center; text-decoration:none; border-radius:7px; margin:30px auto 0 auto; }
.lm-buybutton:hover {cursor:pointer; background:url(http://www.joshkatherman.com/wp-content/uploads/2016/07/bglines-medium.png) repeat #ffba02; transition:0.2s; padding:20px 70px 21px 70px; box-shadow: 0 -6px 0 rgba(0,0,0,0.3) inset,   0 6px 3px rgba(0,0,0,0.2);  margin:29px auto 0 auto;}
.lm-buybutton:active {cursor:pointer; background:url(http://www.joshkatherman.com/wp-content/uploads/2016/07/bglines-medium.png) repeat #ce9807; transition:0.2s; padding:20px 70px 19px 70px; box-shadow: 0 -4px 0 rgba(0,0,0,0.3) inset,   0 4px 0px rgba(0,0,0,0.2);  margin:31px auto 0 auto;}

So that’s it!  I’d love to see how you use this in your own projects.  Post a link in the comments below to share any page or project you’ve used this on.  Also if you have any questions implementing this into your pages, you can let me know here as well and I will help in any way possible.

Copyright © Josh Katherman