Hi Paul!

From what I can tell this isn’t currently possible. The best option is to add hyperlinked text using the link function. If you want to call it out as much as possible you can link text in a Callout feature in the text editor for articles! 

There’s an Idea opened to allow for more robust editing using “Source”. Definitely take a look to see if it interests you! The comments might also have some helpful information for workarounds ?

Hi! Yeah, that''s the way we do it now, but y’know, I like buttons. ? Looks a lot better imo.

This way is also handy, but it is a bit large.

Upvoted that one the moment I saw it. I hoped there would be some work around but I guess not.

@Paul_ unfortunately not right now.

My first workaround thought would have been an image with hyperlink.

But alas, hyperlinked images is not an option either.

Thanks for the voting and pushing of the product! 

This is indeed not possible

But…

You can make it look like it’s possible with a little bit of trickery :)

I’ve added the following CSS to my custom-css, which makes any of the red callouts, on a specific article (36), in a specific category (42) look like a sort of button.

/* add a button to a specific topic's cta */ body.category-42.topic-36 .callout-red{     background-color: white;     border: 2px solid #CCC;     padding: 0;     border-radius: 10px;     display:inline-block;     box-shadow: 0 0 5px -1px rgba(0,0,0,0.2); } body.category-42.topic-36 .callout-red a {       text-decoration: none;     padding: 10px 20px;   display: inline-block; }

Please adopt the style to your community, so that they look like your buttons! This really is meant as a proof of concept.

 

This is indeed not possible

 

But…

 

You can make it look like it’s possible with a little bit of trickery :)

 

Love this, thanks! I’ll play around with it on staging.

So this works pretty well I think @bas. Whenever I use the red call out option, it will be a button(-ish kinda). 

Hello! 

Maybe this doesn’t help at all, but want to share what we’ve done to include buttons 

I have the same use-case as our main site uses buttons in texts.

What i have done instead is to customize the spoilers to look like buttons. It doesn’t work as a button where you are directed somewhere else, but I think it brings a more seamless experience between our two websites aestheticly. It looks like this:

Standard:

(Visa=Show)

While hovering:

Opened spoiler:

(Stäng=close)

Here is the code I used:

.spoiler-container {
  border: none;
  margin-top: 20px;
}

.spoiler-container .spoiler-toggle-button {
  text-decoration: none;
  margin-bottom: 20px;
}

.spoiler-toggle-button span {
  border: 1px solid #000;
  background-color: #fff;
  border-radius: 50px;
  padding: 10px 30px;
  transition: 200ms;
  margin-left: 10px;
}

.spoiler-toggle-button span:hover {
  box-shadow: rgba(0, 0, 0, 0.4) 0 2px 9px;
}

@Paul_ @bas  @Alistair FIeld  @Mattie K 

Ok, I have maybe come up with a workaround to a working CTA in articles 

You can see it here in a draft I made

How i did:

So the standard heading-sizes in InSided is H1, H2 and H3. So when creating an article I thought maybe we could assign one heading as a “Button heading”. Lets choose “H6”, since we never use or have used the H6-heading.

1. Create the content of the article. The button in my case reads “Click here” and I have hyperlinked it using the “insert link” button:

   

2. Go to the HTML-editor, and change the “Click me” paragraph from “<p><a href=yourlink>Click here</a></p>” to “<h6><a href=yourlink>Click here</h6>”:

   

3. Now we have an article that looks something like this:

   

4. Now I add this styling in the custom-CSS panel, and directly towards the H6, and H6 Anchor tag - the styling is our brand styling, so you might want to change som colors and stuff:

   .post__content h6{
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 10px 20px;
     font-size: 16px;
     font-weight: 500;
     background-color: #fb8400;
     border-radius: 100px;
     width: 150px;
     transition: 200ms;
     cursor: pointer;
   }
   
   .post__content h6 a {
     color: #000!important;
     text-decoration: none!important;
   }
   
   .post__content h6:hover{
     box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
   }

5. The end result was pretty pleasing! Keep in mind, you must press the text for the link to work, as it really is a styled text-link. 
   
   Standard:

   

   
   While hovering:

   

The problem is that each time you want to make a button, you need to change the value <p> to <h6>, but I think that’s alright! 

@JeppePeppe What a great workaround! Thanks for sharing 

Now if I can get our team to agree to not use one of the header sizes… 

I think @JeppePeppe workaround is best because you dont have to modify css to each and every article.

Thanks for the tip, some day I have to test this.

(Hopefully inSided offers out of the box solution in the future)

O, great ideas! Very cool. Thanks for all the help!

Also: great url used. Got me.

@Paul_ Haha nice

Nice work @JeppePeppe !

@JeppePeppe Can I ask a follow up?

I used your method to try it out and it looks great on desktop. But on mobile it changes to a normal text url. Any ideas? I know how to tweak stuff but making it responsive proof.. I dunno.

@Paul_ How weird!

I checked the article you linked and looked at the console, and from what I can see you have a media query “(min width: 1025px) on this code - when the screen gets a width that is smaller than that - the code dissappears.

Can you see if you have this media query in the code? I would just remove it, since the CTA-button doesn’t need adjustment for screen sizes 

@Paul_ How weird!

I checked the article you linked and looked at the console, and from what I can see you have a media query “(min width: 1025px) on this code - when the screen gets a width that is smaller than that - the code dissappears.

 

 

Can you see if you have this media query in the code? I would just remove it, since the CTA-button doesn’t need adjustment for screen sizes 

You’re a legend. 

It was some code to change the featured topics on mobile I think. It's gone now. And the button works. Thanks!

Great! Happy to hear that it works 

.post__content h6{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  background-color: #fb8400;
  border-radius: 100px;
  width: 150px;
  transition: 200ms;
  cursor: pointer;
}

.post__content h6 a {
  color: #000!important;
  text-decoration: none!important;
}

.post__content h6:hover{
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
}

@JeppePeppe You are truly wizard 🧙. Thanks a lot for this tip.

I used Copilot to made small changes to the CSS. When using this CSS, button adapts to the length of the text:

.post__content h6{
  display: inline-block;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  background-color: #fb8400;
  border-radius: 100px;
  transition: 200ms;
  cursor: pointer;
}

.post__content h6 a {
  color: #000!important;
  text-decoration: none!important;
}

.post__content h6:hover{
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
}

I'm gonna check it out. I’ve currectly got 3 different sizes buttons via CSS so 1 that adapts would be better.

Okay, this works like charm @revote. Many thanks! If you’ve got any more CSS gems, let me know :P

Nice Let´s all say big thanks to the @JeppePeppe. He is the master here

Haha, I dont do CSS. At all. I can only try to modify existing codes. Copilot is the best buddy

Amazing @revote! I’ll add this to our community right away, great upgrade!