I hate the way Xara has just stopped designing components for the web despite adding some powerful innovations to the HTML Filter that generate your website pages.

This is rather noticeable (to me) when an otherwise crisp XDA website falls down over the appearance of its rollover buttons and worse, the NavBars.

The following crib sheet has come about with a lot of nudging to see what can be achieved in creating buttons that are effectively CSS-styling. i have used this for my own site but have had to add the CSS code in manually.
This crib uses a number of techniques that allow the XDA to do the coding for you.

The techniques include:
  1. Using a Rounded Rectangle to replace Straight Lines, the Page background Shadow, Ellipses and Circles as it never produces an image, just HTML SPAN code.
  2. Using Linear and Circular Fills; again HTML code for Gradients. Multiple stops in the Linear Line are possible.
  3. Using a 'no colour' Fill to achieve a Transparency. The design page seems to show this as White but check the Colour Bar and Preview.
  4. For Stretch Buttons, changing the Rounded Rectangles to Editable Shapes retains their 'no image' nature.
    1. The Xara concept of "Stretches" using linked Names is older than the Xara Designer Pro X application. Hard to describe, yet powerful in its usage.
    2. StretchesYou can use named objects to stretch other named objects, e.g. the text on a button. Both the text and the button are named objects, with the text flagged as stretching the button. When you change the length of the text (for example by typing in more characters), the button automatically resizes to match.
      When you choose Stretches properties, a check box to the right of object names shows those objects you want to stretch. The arrow to the right of the check box shows if the stretching options are set up (solid arrow) or not (hollow arrow). Click the arrow to display the Extend Dialog Box which lets you select those objects from the list of named objects to control the stretching. For each direction you can select if the size changes in the same direction as the controlling object (Extend) or equally from the center (Scale).

Xara - No Image Buttons.xar
  • Preview the crib sheet and check the rollover effects.
  • Play around with the Named Colours.
  • Tweak the Shapes, noting what breaks the 'no image' "rules".
  • Alter the wording of "change this text" and view what happens to the box below.
  • Add the Name "Button" to the yellow bar and repeat the last operation.
  • Move the Text Line around the page..
  • Rearrange the Box and Bar with the Tex line to make a "stretch button" (MouseOff layer only).


With patience some very elaborate 'no image' Buttons can be build up with these few techniques.

Acorn