Skip to main content
Paul_
Paul_
Contributor ⭐️⭐️⭐️⭐️⭐️
December 14, 2022
Solved

Adding buttons in an Article

  • December 14, 2022
  • 23 replies
  • 425 views

Hi,

Not sure if this is possible because afaik you can't add HTML of CSS in an Article. Is there an easy-ish way to add CTA-buttons in de text of an Article? I think it would look clean and it would be more in line with our regular .com site...

    Best answer by bas

    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.

     

    23 replies

    Show previous replies
    Paul_
    Paul_Author
    Contributor ⭐️⭐️⭐️⭐️⭐️
    December 19, 2022

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

    Paul_
    Paul_Author
    Contributor ⭐️⭐️⭐️⭐️⭐️
    December 19, 2022

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

     

    1. 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>”:

     

     

    1. Now we have an article that looks something like this:
    2. 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);
      }

     

     

    1. 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! 😊

    Also: great url used. Got me.

      JeppePeppe
      JeppePeppe
      Helper ⭐️⭐️
      December 19, 2022

      @Paul_ Haha nice 😉

      tah-dah
        bas
        bas
        Helper ⭐️⭐️⭐️
        December 20, 2022

        Nice work @JeppePeppe !

          Paul_
          Paul_Author
          Contributor ⭐️⭐️⭐️⭐️⭐️
          December 21, 2022

          @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.

           

          Lookin’ good
          Button gone. sad

           

          JeppePeppe
          JeppePeppe
          Helper ⭐️⭐️
          December 21, 2022

          @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.

           

          (at the top)

           

          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 😊

          tah-dah
            Paul_
            Paul_Author
            Contributor ⭐️⭐️⭐️⭐️⭐️
            December 21, 2022

            @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.

             

            (at the top)

             

            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!

              JeppePeppe
              JeppePeppe
              Helper ⭐️⭐️
              December 21, 2022

              Great! Happy to hear that it works 😁

              tah-dah
              revote
              revote
              VIP ⭐️⭐️⭐️⭐️⭐️
              July 24, 2024
              1. 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);
              }

               

              @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);
              }

               

                Paul_
                Paul_Author
                Contributor ⭐️⭐️⭐️⭐️⭐️
                July 25, 2024

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

                  Show more replies
                  Terms & ConditionsAccessibility statement