Adding buttons in an Article

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 :)

 

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)