Start here
Editing and styles
Media and content
Tutorials
Site and publishing
Layout and navigation
Forms and services
Add a Button, give it a clear label and choose what it does when the visitor activates it.
Use the Style inspector to choose its On Click action and appearance. The screenshots below show the label and action controls.
Use Go to Page in This Website for a page or scroll location, Go to External Link for a URL, or Download File for a document. Buttons can also open or close a popup, control media or a gallery, change a page state or color theme, and start a timeline.
After choosing the action, select the page, element or other target it requires. For form submission, follow Forms. See Links for the available actions and their settings.
Style the Default, Hover and Pressed appearances. Use Save Preset in Style to reuse that artwork on another button while keeping its label and action. Use named variants for appearances driven by conditions, such as media playback or a page state. See States and Variants.
Enable Button Icon and choose stock artwork or a custom SVG. Set Position, Icon Size and Distance from Side. Background adds a panel. An enabled border can provide an Icon / Text Separator.
For an icon-only button, clear the text and enter an Accessible Label. For a tintable SVG, use Color Overlay and Tint Color.
Choose different SVGs for Default, Hover or Pressed. Enable Morph Icon to use that appearance’s timing. Hover over the demo to turn the plus into a minus. Check reduced motion in Preview.
Hover to change icon
The examples below combine image buttons, text and boxes. Keep their parts grouped when moving them. For a simple icon with a label, the native Button Icon controls above provide that layout in one button.
These are image buttons created by adding images to the button background. You can have image variations for each button state, Normal, Hover and Clicked.
PRESS
Come Fly With Us
Click the Bird to Book
This element is a composite of a standard box outlined in red, two text boxes, and an image button in the center. Simply group the elements to make one easy-to-place element
Here is another composite interactive element. In this first example, the speech bubble was copied from Apple Pages. The button was placed over the top and given a transparent background. The link would be set to Call Phone Number. The Click/Tap to call function only works on smartphones. It could also be used to have the user send you a text.
If you’re viewing on a Computer
Phone +34 000 111 111 2222
Click Here
to
Call me NOW
In this final example, you can create a link that opens an email client, or change the button label and have the link send a text message, or maybe open a form. Whatever you choose, the element is created the same way. The text is a button with a transparent background. It’s been grouped with the hand image to make it easier to move around on your page as a complete element.
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
Updated for Sitely 8
Powerful and refreshingly simple, at home on Mac, finding new freedom on iPad.
This website makes use of cookies.
Please see our privacy policy for details.
