Creating a Button in RTE

Hi there,

I was just wondering if it’s possible to create a button, specifically a ‘Buy from Amazon’ button in RTE?

Thanks for any help offered :slight_smile:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Currently, I am using images as button, but is there a way to make only images with links change when someone hovers over them (in RTE)?

Thanks so much.

Not sure if you need my read-only link but here it is: Webflow - Expert Cat Care

Currently, I am using images as button, but is there a way to make only images with links change when someone hovers over them (in RTE)?

If it’s got a class applied to it, you can style how links appear within that specific RTE element — but this will also apply to any other link as well:

To give you full control, I’d recommend using custom code which you can add via the flyout menu that appears on a new line:

This will allow you to create a custom button using a class created in the Designer that has unique hover affects applied to it :+1:

Thank you so much. Can you explain a little more how I do this or how I find out how to do this. I have zero experience with website building so perhaps Webflow wasn’t the best choice in hindsight but I’m slowly getting there… Thank you so much again :slight_smile:

First you’ll want to create your button element in the designer — to do this, just use the Add Elements panel to place a button element anywhere on the canvas:

Give this a class name that you can reference later and style it to match how you’d like the button to look in the RTE:

Note: To give the hover effect some pizzaz, make sure you add a transition with any of the effects you want to animate — for this example I’m going to update the text and background color:

Now head to the class selector dropdown, choose “Hover” and edit the styles you’d like to change on hover:

image

Make sure you test the interaction to make sure it looks correct, then go ahead and delete the element from the canvas (we’ll only be using the class):

button-hover

Note: Since it no longer lives on any pages, using the “Clean Up” feature in the styles panel will remove it from the project — so I’d recommend adding the element to a hidden/draft page (like your “Rich Text Style” page):

image

Now that you’ve got your button class setup with the desired animation, you can use the class within a custom button element within your RTE! I’ve included the code below — just make sure you replace the BUTTON_TEXT and BUTTON_LINK with the appropriate content.

<a class="affiliate-button" href="BUTTON_LINK"  target="_blank">BUTTON_TEXT</a>

Note: If you used a different class name, remember to swap that out as well, just remember to convert any capitals to lower-case and replace any spaces with dashes (ex: Your Class would turn into your-class).

Hopefully that helps get you started but don’t hesitate to reach out if you run into any issues or have any other questions :+1:

Thank you so, so much, just amazing of you to explain this step-by-step.

However, on my live page I am not getting a button, just text that looks like a link (centered on the page), so I am not to sure what I am doing wrong. I haven’t completely stylised it yet as I wanted to make sure I could get it working. The button is on my RTE page.

The page I have tried it on is at the top of the body condition score article.

Again, thank you so much.

Hi Mikey,

I seem to have gotten a little further (I know have it looking a bit like a button) but the text still seems like it still wants to take on the style I have for other links in my RTE…

Also, is it possible to create my own button, with images, interactions (making it pop on hover) etc, and embed it within my RTE?

Thanks so much :slight_smile:

@Kate_McMahon just seeing this in here and going to the read only

you have 114 un-used classes I would clean those up first

Thanks TJ, I cleared them up (a little scary I have to admit) but the button on my live page still looks the same…

@Kate_McMahon do you have a link to live page for me to peek at

@Kate_McMahon you can create a image link using standard css

Webflow - Rollover Affiliate Button