I was offering some help to a forum user who wanted to add buttons to a Rich Text Field in Webflow. There was no way to do that current in the editor or the designer. Unless you add a picture of buttons like the one above, but then all you could do was look at it.
Update : November 22, 2019
Webflow has added a custom code element that is accessible from within a Rich Text Element that allows you to insert any custom code (HTML or JavaScript with a 10K character limit) into the RTE area. This addresses the previous limitation and provides much more.
Read about the feature here > https://forum.webflow.com/t/you-can-now-use-custom-code-in-rich-text-elements/101572
So with this new feature you just add the HTML you want or some JavaScript that renders content.
Content below is the original article before this new feature. Using the technique below you can add content dynamically to Rich Text elements across your template derived pages so it still has its uses.
Bummer right? I want web buttons!
I have a client that wanted the same thing. So I took a look to see if there is a way to pull this off. As many of you know, I am happy with custom code approaches.
I love when people talk about how NO CODE solutions are the future, but the majority of Webflow designers run right into the NO CODE wall often. As a web designer, you are where the rubber hits the road with Webflow. Learn HTML / CSS / and a little JavaScript so you have no problem giving the client what they want. That's what a professional does. There is no way that you will ever be able to do everything you want without a code editor and some skills.
The Problem
You can't add a button element to a rich text field in Webflow. It does not exist as a feature in the Rich Text Editor. Ok, how about style a link to look like a button?
While you can add links in the RTE, you can't assign classes, nor data attributes to one. You could style every link to look like a button, but then an inline link just became a block element and broke the flow of your beautiful content. So how can you selectively target a link with CSS, other than ALL LINKS inside a RTE?
Specificity is your Friend
First, let's make some assumptions about when we would want a button. We would probably want a button as part of a call to action that points to an internal resource on your site. A collection item, a static page, etcetera.
Ok, so we have a link context. Internal.
Next, we don't want to break the flow, so we need a way for the user to let us know when a link should be a button.
How about a link that goes into a new line all by itself?
A new line would create a paragraph element in the editor. So we could look for a link that was internal and was sitting by itself inside a paragraph.
As long as Webflow is including jQuery, we can make this a trivial exercise (almost). The script certainly could be written with vanilla JavaScript. Just more lines of code and some extra work.
Steps to Implement
Add a class to your Rich Text Element in the designer. I used "c-rte" short for component-rich-text-element which I will use as the first part of the jQuery selector. If you use a different class, then you will need to modify the selector yourself.
On your style-guide page, you know, the one where you create all your styles and naming, so you have a visual reference to all your elements on one page; add a link.
Then give it a class name of "c-rte-button." Style that element in the designer so looks like a button. Keep this around so if you go to clean up your classes, it won't get tossed. You can always update it to affect the look anywhere that it's used.
The Code
$(".c-rte p").each(function() {
var ptext = $(this)
.clone()
.children()
.remove()
.end()
.text();
if (ptext === "") {
$(this)
.find('a[href^="/"]')
.addClass("c-rte-button");
}
});How does this work?
We are targeting all paragraphs inside an RTE that has a class of "c-rte." The script then iterates over each element, first making a copy in memory, then finding all child elements and removing them, then returning the text contents of the paragraph. It then checks to see if the contents are empty. If they are, we go back to the original element and find any child elements that are links pointing to a relative path (a link in your site). We then add a class called "c-rte-button" to the anchor element.
Can't you just use .text()? Nope, since it would return the text of children elements too.