I’ve got a small problem and need some help or a workaround. On the left side you see the Button with a small line below. When you hover over the button a few interactions will be activated.
My problem is the small line below. I want to transfer this design and interaction (left button) to the submit button of my form (right button). But as I tried to do so, I’ve noticed there’s no possibility to add elements inside the form button.
Is there any possibility or workaround to get a custom submit button like mine?
I’ve already searched for custom code solutions, but without any success. Maybe someone can give me catchphrase or search word to get a little closer to my goal.
@mjerxsen Hello, mjerxsen! I’m sorry that no one got back to you earlier, I would’ve helped you if I saw this earlier. Anyways, I’ve found a solution for your problem… and it uses no custom code!
It’s a bit tedious to work out, but I’ve made a screen recording to show you which elements I’ve added and how I styled them.
My take on creating the interaction in the button started by creating a div block that the submit button would nest in. The div block would be set to relative so that I could position 2 more lines (line 03 & line 04) that are both position absolute with a z-axis value of 10. This allows for the lines to be nested in the “Button wrapper” element and still show over the button.
The interaction was modified by duplicating the line 01 and 02 hover states so that they could be applied to the 03 and 04 lines. The only reason they had to be duplicated was because the SUBMIT test is shorter than the BUTTON TEXT. Instead of their width going to 100%, I shortened it to 43% because SUBMIT is shorter than BUTTON TEXT. This interaction was then applied to the “Button wrapper” element.
This is a handful, but I hope the video should help you.
Let me know if you have any more questions.
Happy designing!
Woohoo - nice! Big thanks for the short “tutorial vid” and this solution. It seems to work nice and smooth (I’ve updated the live preview page.).
I’ve added a small piece of custom code, which set the pointer-events to none. With this code you prevent to interrupt the hover effect. Live preview Link: http://testarea-020de7.webflow.io
The custom code (posted below) works for the left submit-button. The right submit-button doesn’t get adressed. When you hover over the underline of the right button, the hover-effect gets interrupted.
Maybe a little additional information: In this solution every underline with another length (because of different text-length) has to get a unique class and transition, which addresses the special line.
