A Zen Button, hard at work...

The Zen Button Macro automatically looks for the image files zen-button.png and zen-button-hover.png. New in Zen 5.2.7, if you're using a built-in brand, such as Breeze, or Chameleon, or Zen's spiffy new one-click Intranet, Zen will automatically style any Zen Button you insert. 


How It's Done

Insert the "Zen Button" macro into a page. (Start typing "Zen Button" in the search field of the Confluence Insert Macro wizard, and you'll see it pop up.)

When you select the macro, you'll notice some macro options. For instance, you can input button text, as well as where you'd like the button to link. 

Quick Tip: More Macro Options

Want your button to align to the right of the page? Wish you had a little bit more room around your button? There's a setting for that! Just scroll deeper into the macro options. Use the "float" option to align your button right or left. Use margins or paddings in the macro to add more room around your button. 

Even Sexier

Sometimes it's important to direct your viewers attention to a specific action on a page. "Call to Action" buttons—a larger button with an arrow to direct your viewer's eye— are a great way to do this. You can add a Call to Action button to your page simply by adding the class "call-to-action" in the Zen Button Macro settings.

Creating your own brand?

If you've ever done any web design work, you'll know that fancy dynamic buttons used to involve tedious graphic and CSS work. (Sliding Doors, anyone?) With the Zen Button macro and the Brand Designer's Gradient Maker, making sexy buttons is now a pleasure — all within Zen's Brand Designer, no design program needed.

Sexy Buttons Your Way: How To
  1. First, you'll need to create your own zen-button.png and zen-button-hover.png images. So before you insert your macro, just open up the Brand Designer and click on Gradients.
  2. Now, create an image named "button" (40px high is a good place to start) and select your start and end colors. We find that choosing a pop brand color for the END color, and a brighter lighter color for your START color, along with a Start Gradient of ZERO and a Stop Gradient of something small (try 14) makes a nice shiny button effect. 
  3. Rinse and repeat to create an image named zen-button-hover.png, but this time with a bit darker (or lighter) END color.
  4. Finally, open the Brand Designer and click on the Button options. You'll find many settings available to fine-tune the rest of your Zen Button styling, including borders, text color, and text shadow options.
#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))