CSS-Button-Design translated into Webflow

Design help General
1

Dear Webflow community,

I would like to have this button :slight_smile: : https://codepen.io/Mohsen-Khakbiz/pen/RaqaOG

I am not sure how to make this work in Webflow with only ONE real button.
In the code-pen it says that there is only one:
<a href="#" class="fancy-button bg-gradient1"><span><i class="fa fa-wheelchair-alt"></i>Follow Me</span></a>

I also guess that transform-style: preserve-3d; is not so important and not supported in Webflow?

The transform is easy to do in Webflow, but I guess in Webflow you have to copy the button and layer them above each other with z-index (the lower one is blurred)? It would be great if someone could push be in the right direction :slight_smile:

2

Yeah, support for various pseudo-elements (:before is used for this example) in WF is not yet implemented unfortunately. You will have to have your button duplicated for gradient retention.

Not sure about transform style, I guess it is not important and can be ignored.

edit: you don’t really have to duplicate the actual button with all its styles, just create a div for its shadow with proper size, gradient and blur added.

1 Like
3

Thanks a lot @dram ! Will try it with a div than :slight_smile: