Clone Project

3D Button with Custom CSS - #3dbuttonchallenge

Created by
Avengr
Similar Projects
Oops! Something went wrong while submitting the form.

0 Comments

Be the first to leave a comment.
Loading
User is typing...
No Name
Set
4 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
No Name
Set
2 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More
Description:  
Description from Webflow:  
Trying my hand at solving @fry's 3D button hover animation problem. In this method, I've gotten it down to 2 elements in the designer (a background, and a "button" div), the rest of the work is done in the CSS you'll find in the Page settings. The CSS here is creating two pseudo-elements, the triangles that animate alongside the button when you hover over the background element. The background & button element combo is super reusable, and you can make style changes to your copied buttons (background color, font styles, sizing, etc) just by adding a secondary class, that doesn't break the custom code! The main quirk is that if you want to change the background color, you'll also want to change the border colors in the CSS to match, as I just have them set to white right now (as you can see in the 3rd example where I changed the background but not the border colors. I may continue to try to find a way to tie the border color to the background color.
Tags from Webflow: 
css, custom code, 3dbutton, cloneable, button
.