I was offering some  help to a forum user who wanted to add buttons to a Rich Text Field in Webflow.  There is no way to do that currently 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.

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)

  if (ptext === "") {

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.

Here is a pen you can play with.

jQuery code you can copy an use. 


Add a couple of classes, run this jQuery code that targets links inside paragraphs with no text, where the link is internal. Adds a CSS class to style as a button. Can be used inside Rich Text Elements where no other option exists.