Styled Button

Styled Buttons are elements in RocketCake which can be used to create a nice looking button without the need to use a graphics program to do this for you. Also, the buttons are usually created in the HTML without images if possible - using CSS style sheets alone - reducing the needed download size and speed of your website greatly.

Creating a Styled Button

By using the 'Styled Button' entry of the Toolset or the menu command 'Insert -> Styled Button', you can place buttons on the website.

You can customize the appearance of the shape using the property window.

Button with Text or Hyperlinks

You can click into a button and start typing. The text will be displayed centered in the shape, which is useful to create buttons. Additionally, it is possible to create a hyperlink for the button, so that the user is able to click on the button and for example open a new page. Simply select the shape, right->click and select 'Insert Hyperlink'.

If you want the button have a different color when the mouse cursor moves over it (which is desirable sometimes for hyperlinked shapes), simply select the 'UseHoverStyles' checkbox in the property window of that shape and choose some colors. Hover styles will not be shown in the editor, simply click 'Publish -> Preview' to test them out.

Properties

This component supports several background modes (Color, Image, Gradient), changeable by selecting the property 'BackgroundMode'. It also supports several border modes. The background will only be visible if the image file cannot be loaded or the image is transparent.

Other supported properties are:

BackgroundMode: How to fill the shape, either via Gradient, Color, Styled Button style or an Image file
GradientStyle: If the fillmode is 'Gradient', you can select the style of the gradient here. Supports 'horizontally' and 'vertically'
DarkeningFactor: When the BackgroundMode is 'Styled Button', it is possible to change the brightness of the color here. Choose any value between 0 and 100, 0 for very bright.
Transparency: A value between 0 for opaque and 100 for 100% transparent
UseHoverStyles: If you want the shape have a different color when the mouse cursor moves over it (which is desirable sometimes for hyperlinked shapes), simply select the 'UseHoverStyles' checkbox in the property window of that shape and choose some colors. Hover styles will not be shown in the editor, simply click 'Publish -> Preview' to test them out.