Customizing submit button with codepen

Design help Custom code
1

Hello there! Is there a way I could use this code to customize my submit button interaction?

This is the effect I’m trying to achieve

To this specific page (Contact page - form button)
https://preview.webflow.com/preview/test-mu-peng?utm_medium=preview_link&utm_source=designer&utm_content=test-mu-peng&preview=3bd294a564170ae2524a90f245980bfc&pageId=605160c43ca3492dc87b4006&mode=preview

2

Hi,

You could try using a DIV block with a custom html code block and the submit button inside.

  1. Add a div block
  2. Set the div position to ‘relative’
  3. Inside the div, add a html element with the custom code inside
  4. Drag the submit button inside the div
  5. Set the submit buttons width and height to 100%
  6. Set the submit buttons position to absolute and ‘cover’
  7. Set the submit buttons opacity to 0
  8. Set the submit buttons z-index to 2
1 Like
3

Hi @JSW , thank you for this!! It has been working pretty well, except when I try setting the z-index of my submit button to 2, I cant hover on my embed button to show the effect

4

Add this to your <head>, replacing ‘name-of-your-element’ with the name of your submit button.

<style>
.name-of-of-your-element
    {
    pointer-events: none !important;
    }
</style>
5

Hi @JSW ! The embed is working now after adding the code to , but now I can’t seem to use the submit button to submit my form :sweat_smile:

https://test-mu-peng.webflow.io/contact

6

Hi, @Bianca_Are

It seems to be working for me? Did you fix it?