How can I style an HTML embed link in Webflow to look like two distinct buttons?

Published on
September 22, 2023

To style an HTML embed link in Webflow to look like two distinct buttons, you can follow these steps:

  1. Add an HTML embed element to your Webflow project. You can find this element in the Add Panel on the left-hand side of the Webflow Designer.
  2. Inside the HTML embed element, create two separate links that will serve as your buttons. You can use the tag to create clickable links. For example:
<a href="#" class="button1">Button 1</a><a href="#" class="button2">Button 2</a>
  1. Apply custom classes to each button link to differentiate their styles. You can do this by adding a class attribute to each link element, as shown in the example above. Replace "button1" and "button2" with whatever class names you prefer.
  2. Define the styles for each button class in the Webflow Designer or custom code. Here's an example of how you can style the buttons using custom code:
<style>.button1 {  background-color: #ff0000;  /* Set the background color for button 1 */  color: #ffffff;  /* Set the text color for button 1 */  padding: 10px 20px;  /* Adjust the padding to your desired values */  border-radius: 4px;  /* Add rounded corners to the button */  text-decoration: none;  /* Remove underline from the link */}.button2 {  background-color: #0000ff;  /* Set the background color for button 2 */  color: #ffffff;  /* Set the text color for button 2 */  padding: 10px 20px;  /* Adjust the padding to your desired values */  border-radius: 4px;  /* Add rounded corners to the button */  text-decoration: none;  /* Remove underline from the link */}</style>
  1. Customize the styles in the code block above to fit your design preferences. You can adjust the background color, text color, padding, border-radius, and other properties to create the desired button styles.
  2. Save your changes and preview your site. The HTML embed link should now display two distinct buttons based on the styles you defined.

By following these steps, you can easily style an HTML embed link in Webflow to look like two distinct buttons.

Additional questions:

  1. How do I create custom styles for HTML elements in Webflow?
  2. Can I use custom CSS code to style elements in Webflow?
  3. Are there any limitations to using HTML embed elements in Webflow?