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

This widget could not be displayed.

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.

This widget could not be displayed.

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.

This widget could not be displayed.

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!

This widget could not be displayed.

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 Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

254 views 2 4
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