Skin form — Components tab — Controls — Buttons
Styles set here apply to buttons. The following button formats are available in a skin form.
- Standard — Default format applied to buttons
You can also create custom button formats.
A preview of the currently selected format displays to the right. To preview all Button formats, click Preview All.
You can also preview formats by selecting Actions > Launch in the toolbar and then choosing one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview.
Select this check box to define a custom text format:
If desired, you can specify the Top , Left , Right , or Bottom border as none, solid, dashed, or dotted, rather than inheriting the style from the selected mixin.
You can specify a custom border by selecting or clearing the Apply to all sides check box:
The following border styles are available:
|enable rounded corners (HTML5 only)|| Select this check box if you want the border of the overlay to have rounded
corners when rendered in HTML5 document type. You can select this option when using
a mixin or a custom border.
Rounded corners do not work when the UI is rendered in quirks mode.
|same for all corners||Select to use the rounded corner settings that you specify in the Unit and Radius fields for all four corners or clear to specify the length of the x and y axis for the Top Left , Top Right , Bottom Left , and Bottom Right .|
|same x and y axis radii||Select to specify x and y radii of the same length. If you clear this check box, specify the length of the x and y axis for the Top Left , Top Right , Bottom Left , and Bottom Right .|
|Unit||Select the unit of measurement for the rounded corner settings: pixels ( px ), em (the current font size), or percentage (%).|
|Radius||Define the curve of rounded corners by specifying the x (hortizontal) and y (vertical) radii of the quarter ellipse that makes the rounded corner of the overlay.|
Select this check box to define a custom background:
Select the background Type:
|Height||Specify the height of the button by entering a value in pixels.|
Use the options in this section to style the control based on its state. You can style the control differently when it is in one of the following states:
- :hover – State of the control when a user points to the control or rests the pointer on the control.
- :focus – State of the control when the field is in focus, for example, the state of a text field when it is ready to accept inputs.
- :active – State of the control when the field is ready to be activated, for example, when a user has clicked the control but has not yet released the mouse button.
- Auto – Select this option to apply auto-generated styles for the control in this state. These styles are generated based on the applied control format and the mixins defined within the format.
- Default – Select this option to apply the default browser styles for the states instead of generating the styles based on a skin or defined CSS in the application.
- Custom – Select this option to define your own styles for the element in this state.
- Create a custom button format
You can create a new custom format or copy an existing one.
- Applying a custom button format
- Component styles (custom style formats)
Use the Component styles tab to define the presentation of components by creating custom style formats. After you define style formats, reference them on property panes for sections, harnesses, and controls.
- Button controls
Use a Button control to enable users to take action on a form, such as submitting the form after filling it out.