Trying to create nice button with icon in confluence cloud

I'm trying to create a really nice button for some content in confluence cloud, but am running into issues making it look good.

 

I've tried lozenge.. but can't get the icons to show up correctly (even when attached to the page).  Does anyone have any suggestions on how to create a nice set of buttons?  I know I could make a macro to do it easily if I wasn't on confluence cloud.. but we are..

ANY help is greatly appreciated.

thanks,

Jason

4 answers

Why not use CSS to style your links so that they look like buttons?

Here is how to do it:

  1. Make sure 'Adaptavist Content Formatting Macros' add-on is enabled (it is by default)
  2. Navigate to your page and open it in Edit mode
  3. Add a div macro to your page, and set the class attribute to 'link_button'
  4. Place your icon and link inside the div body
  5. Add a CSS Stylesheet macro, and style your button. You can use the following code:

    .link_button a{
        border-radius: 4px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        background: #3572b0;
        color: #FFF !important;
        padding: 8px 12px;
        text-decoration: none;
    }
    .link_button a:hover{
        border-radius: 4px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        background: #1c4b72;
        color: #FFF;
        padding: 8px 12px;
        text-decoration: none;
    }
  6. Save the page

Result - a button that will look like the image below (note that I haven't use any icon here), that will change its color on mouse over:

aabutton.png

Cheers! smile

Pretty slick!

Brilliant!  This worked perfectly for me.  Thank you for this.

I can't find a CSS Stylesheet macro for Confluence Cloud - I think Atlassian has removed it.

It's definitely there, but it's just called Stylesheet. There is a chance your admin disabled it though.

Thanks Milo, I'll ask the admin to check it out.

Milo's option is a good one. But if you don't have an on-hand graphics program, there is a free online application built for this purpose that we have used with success.  It has a funny name, but it works: www.dabuttonfactory.com 

Nice! I'll remember that when I need a quick button.

Why not use your favorite graphic program to make the button and add it as a graphic?

Thanks for the idea, Milo!  I certainly could do that, but I'd like to do something with pure text/css & icon fonts if I can.. it should load faster.

 

cheers!

0 votes

Are you writing an Atlassian Connect add-on? If so then you should just use AUI: https://docs.atlassian.com/aui/latest/

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Oct 24, 2018 in Confluence

Atlassian Research opportunity with Confluence templates

Do you use templates with Confluence? Take part in a remote 1-hr workshop. You'll receive USD $100 for your time!   We're looking for people to participate in a   remote 1-hr workshop...

1,100 views 17 14
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you