Trying to create nice button with icon in confluence cloud

[Jason Schleifer]

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

aabutton.png

[Monika Antos [Adaptavist]]

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! 

[Milo Test]

Pretty slick!

[Jason Thompson]

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

[Michael Faux]

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

[Milo Test]

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

[Michael Faux]

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

[TomC]

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 

[Milo Test]

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

[Robert Massaioli (Atlassian)]

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

[Milo Test]

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

[Jason Schleifer]

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!