Trouble styling an HTML Embed link two different ways

Design help Custom code
1

Hi all,

I am trying to have HTML embed link styled like two distinct buttons. After going through the forum I found a way to do this for one button style, however, no matter what I tried I cannot seem to get the second style to work.

The text color of the light button always remains the same color than that of the dark one (I guess it is because it takes its style from the All links tag) however, I cannot figure out how to override it for just that single button style. (I added in a button below the embed as a reference to what I want it to look like).

Maybe some of you awesome people on here can help

Here is my site Read-Only link: https://preview.webflow.com/preview/copyforcoaches?utm_medium=preview_link&utm_source=designer&utm_content=copyforcoaches&preview=054eb274a9cffaa43023507e30f1cd16&mode=preview

2

In the line of embedded script that starts with “<a class=” there are 3 colors defined.

background_color=1a1a1a
text_color=fffcfa
primary_color=8095ff

1a1a1a is similar to black
fffcfa is similar to gray
8095ff is similar to blue

These values are numerical values for each color that you can swap out.

To change colors.
For example, to change gray to green you would change “fffcfa” to say “008800”

It is important not to change any of the code that comes before or after the numerical color value (HEX value) which is always 6 characters long.

3

Hi Paul,

thanks for taking the time to reply. Those values are actually defining the colors of the embedded form itself, not of the embrd button that links to it.

Best
Christina

4

HI @christinahengefeld you can achieve your design several ways and I see in your code a severals problems.

  1. your class is added to wrong element
  2. your class name use wrong syntax (capital letters and spacing)

CleanShot 2021-05-10 at 09.20.28
CleanShot 2021-05-10 at 09.20.28875Ă—285 46.7 KB

One way how to is to wrap your button element in anchor tag and style this element with custom CSS. I have made simple example of your button element in embed but you can place styling to site settings if you use this button across your site.

CleanShot 2021-05-10 at 09.17.43
CleanShot 2021-05-10 at 09.17.431585Ă—905 197 KB

5

Hi @Stan ,

Thanks so much for looking at this and providing a solution.

Does that mean I don’t need the first two lines of code from the Calendly widget? Sorry I obviously do not have any coding knowledge and was just using the code snippet provided by Calendly but I’d love to understand why your solution is working.

Best
Christina

6

hi @christinahengefeld you will probably need these links and stylings as what I saw it is not redirect only but this button initiate callendy modal. I have never used callendy and I didn’t look into documentation. I have deleted these only for example purpose as in read-only doesn’t allow to save changes and script tag prevent displaying results in preview mode.

7

Thanks again, that makes total sense. I will try it out as soon as I get back home and let you know if it works.

Best
Christina

8

sorry, I just got to test your solution today and it worked fantastically.

I actually did style a button in the designer, assigned a class to it and then used it as you suggested, that way I can use on the entire site without having to style the element in the HTML embed or in project settings.

Thanks for hinting me towards the syntax error, that has helped me with other issues I had as well.

Thanks again for taking the time - this community is amazing!

1 Like