nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Accepted answers

All comments

Milo Test

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

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

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!

Monika Antos [Adaptavist]

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

Here is how to do it:

Make sure 'Adaptavist Content Formatting Macros' add-on is enabled (it is by default)
Navigate to your page and open it in Edit mode
Add a div macro to your page, and set the class attribute to 'link_button'
Place your icon and link inside the div body

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