Streaming live at 10am (PST)

How to make HTML embed cover full button

Hi Guys!

Was hoping someone could help. I’m pretty new to webflow and figured out how to create a custom email subject line using embeded code and a link block. However, the embeded code is small and I am unsure of how to make it cover the full button.
I have attached a screenshot of the button, the red part is the embeded code.
I have already tried to make it absolute and cover the button but it does not work properly and only covers the top.
And here is the code inside the button.

<a class="w-inline-block book-class-button" href="mailto:brandon@btek.co.za?subject=CLASS BOOKING - CMS ITEMS HERE"></a>

Thanks in advance!
WEBFLOW

Hey Brandon. You actually don’t need an HTML embed for this. If you use the button component or any link, you can choose from mail, phone, URL, page, file, or anchor. In the mail option, you can set the subject line. See below!

Screen Shot 2022-01-12 at 9.28.37 AM

Hi Joseph,

Thanks for the response! Yes I did see that, however I want to combine class name, date of class and instructor which are 3 different CMS items.
It works perfectly with the embed but just having issues with styling the embeded block.

Gotcha. Does it look like that only in preview or when it’s published, too?

It actually looks worse when published.

Here is a link to the designer
https://preview.webflow.com/preview/style-guide-flux-0e1d5b-10a8fbce71bd7cd?utm_medium=preview_link&utm_source=designer&utm_content=style-guide-flux-0e1d5b-10a8fbce71bd7cd&preview=bf5dbd09c2e78e77edc99f0e0c112fda&workflow=preview

And here is the published site
https://style-guide-flux-0e1d5b-10a8fbce71bd7cd.webflow.io/

It is under the Classes tab in the header

Okay, it’s formatting like that because it has the same class name as your button. So, it’s inheriting colors and sizing. The red border shows because the background on the HTML embed is set to red.

Remove the class in the embed. If you need a class name, don’t make it the same as the button. Or, set up a combo class.

Okay gotcha! Thank you, that has solved the issue of the embed looking weird (I purposely made it red to show it on here), and I thought the class had to be the same in the embed to connect them but I was wrong.

However, now the button looks fine, but I cannot click it and get the email pop up

Also just discovered that if I change the embed class name to something else, it does not open the email at all. Not sure why that is, but it seems like it has to be the same as the button unless it is something else wrong

I found a make shift solution, not sure if it’s the most effective way to do it but it works.
It is quite easy to make a button out of the html embed, but I couldn’t figure out how to put text.
So I built a button, named the html embed class the same as the button, and made the embed absolute and made it cover the button. Works now, thanks for the assistance!

Hey everyone,
I was about to say the same. I also want to make html embed cover button, I am newbie I tried many times to do this but not to do, But after get wonderful support from @BrandonHorvatic , I can easily do this on my website.
Thanks regards
Surveyfor-Customers