Adding a custom class to a link in the Writer field

I’d like to be able to define a custom css class to certain links in a basic Writer-field.

The use case is that most links are basic underlined links, but the client would like to be able to define the link as a “button” style. I basically want to add a .button class to the a-tag in those cases.

How would one go about it? Using Kirby 4 by the way.

I’ve looked a bit at custom nodes and marks, but haven’t really grasped it, and feel unsure if I’m overcomplicating something that maybe could be solved cleaner.

It could also be a great option just to “extend” the link-tag to have another toggle like the “open in new window” that would be “show as a button”. But again, unsure how to get there.

Any tips on how to go about this would be appreciated :slight_smile:

1 Like

I’m looking for the same thing right now. This is my use-case:

I remember that there used to be a plugin or kirby link-popup with a class input field. I created this feature-request for it:

In the meantime I’ll probably work with a button block:

  icon: url
  wysiwyg: true
  preview: fields
      type: link
      type: text
1 Like

I actually ended up conditionally styling links within the last paragraph in a writer-section as buttons, because the use case was exactly like your screenshot – finishing off a section with a single button.

Feels kind of weird, but worked in this particular use case for a very simple site.


.image_and_text p:last-of-type a {
  padding: .5em 1em;
  background: var(--primary-color);
  display: inline-block;
  color: var(--dark-color);
  text-decoration: none;

Can be seen here:

1 Like