Skip to main content
Paul_
Paul_
Contributor ⭐️⭐️⭐️⭐️⭐️
Dec 14, 2022 12:35 PM UTC
Solved

Adding buttons in an Article

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

    bas
    basAnswer
    Helper ⭐️⭐️⭐️
    Dec 15, 2022 9:29 AM UTC

    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.

     

    View in thread

    23 replies

    Show previous replies
    Paul_
    Paul_Author
    Contributor ⭐️⭐️⭐️⭐️⭐️
    Dec 19, 2022 8:08 AM UTC

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

    Translate
    Paul_
    Paul_Author
    Contributor ⭐️⭐️⭐️⭐️⭐️
    Dec 19, 2022 8:10 AM UTC

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

    Translate
      JeppePeppe
      JeppePeppe
      Helper ⭐️⭐️
      Dec 19, 2022 1:59 PM UTC

      @Paul_ Haha nice 😉

      Translate
      tah-dah
        bas
        bas
        Helper ⭐️⭐️⭐️
        Dec 20, 2022 9:58 AM UTC

        Nice work @JeppePeppe !

        Translate
          Paul_
          Paul_Author
          Contributor ⭐️⭐️⭐️⭐️⭐️
          Dec 21, 2022 7:21 AM UTC

          @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

           

          Translate
          JeppePeppe
          JeppePeppe
          Helper ⭐️⭐️
          Dec 21, 2022 8:24 AM UTC

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

          Translate
          tah-dah
            Paul_
            Paul_Author
            Contributor ⭐️⭐️⭐️⭐️⭐️
            Dec 21, 2022 8:37 AM UTC

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

            Translate
              JeppePeppe
              JeppePeppe
              Helper ⭐️⭐️
              Dec 21, 2022 8:41 AM UTC

              Great! Happy to hear that it works 😁

              Translate
              tah-dah
              revote
              revote
              VIP ⭐️⭐️⭐️⭐️⭐️
              Jul 24, 2024 8:09 AM UTC
              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);
              }

               

              Translate
                Paul_
                Paul_Author
                Contributor ⭐️⭐️⭐️⭐️⭐️
                Jul 25, 2024 8:19 AM UTC

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

                Translate
                  Show more replies
                  Terms & ConditionsAccessibility statement