HTML Embed collection button

Design help General
1

Hi

I have a collection in the workspaces page for the private office’s section.

Each private office has a thumbnail and currently, I have a button created using and html embed set to email with the office name so Office 12, 13, 14 etc. So each thumbnail link has a different subject in the email.

As it is an html embed I would like to style the button like the other orange buttons on the site. What would be the best way to create a text box within the button?

Thanks

Here is my site Read-Only: https://preview.webflow.com/preview/39svp?utm_medium=preview_link&utm_source=dashboard&utm_content=39svp&preview=132f296c2df3e9d1c2c43cee459b78b2&mode=preview

2

Hey @scottalexwatson! Hope you’re well.

If I’m understanding you correctly, you’re looking for a way to style your HTML embed the same as your orange buttons, correct? And then place a text block inside of it?

If so, here’s what I did with your read-only link to achieve somewhat along the lines of what you’re looking for. In your HTML Embed, change your code (temporarily) to:

<div class="button-orange w-button">
     <p> Email </p>
</div>

When you do this, you’ll see the text “Email” within your Div, styled with your site’s default styles for paragraphs.

Now, for your specific use case, replace the code above with the code below:

<div class="button-orange w-button">
		<a class="w-inline-block button-private-office" href="mailto:scott@scottalexwatson.com?subject={{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}">Email</a>
</div>

It looks a little odd when you do this, but you just need to re-style the button-private-office class to fit more cleanly within the div.

Hopefully this makes sense. Let me know if you have any questions!

3

Hi Matt,

This worked perfect!!

Many thanks for the help!

Scott

1 Like