Buttons | Sparkle Documentation

Buttons are an essential ingredient in getting people to interact with your web pages. They can be one-off ‘Calls-to-Action’, or they can be grouped to form the basis of a complete site navigation. At the simplest level, you create a button by adding the ‘button’ object to the canvas. From there you can style the button using all the options found in Sparkle’s style panel.

The first thing you will need to do is to give your button a label so users know what it is. You also need to tell Sparkle what you would like the button to do when it’s clicked. This is called the ‘On-Click’ action.

Here is a summary of the options:

Go to Page in this Website: This option will link to any page in your site you designate.
Go to External Link: This creates a link to an external URL.
Open Email: This option will create a link that opens the user’s email client and prepares a new message to be sent to a designated email address.
Download File: This action will download a file you designate.
Call Phone Number: This is a useful feature for mobile pages of your website. Clicking this type of link will initiate a phone call to a designated phone number.
Send Text Message: This works in the same way as the phone number option, but initiates a text message instead of a phone call.
Share this Page: This is a sharing link that allows visitors to share your web page on popular social media platforms.
Send Contact Form Via Email: This action would typically be attached to a submit button on a contact form, and will send the information from the form to a designated email address.
Advanced Form Submission: This is similar to the normal contact form via email option, but offers some additional features that may be required by some web hosting servers.
Open/Close Popup: These actions will cause a designated popup to open or close when the button is clicked. Popups can also be activated with the Mouse Hover action in the style panel.
Media Control: This allows a button to be used to control video or audio content on the page. By using several buttons, you could create a customised media player, with each button controlling a different aspect of the media (play, pause, mute etc.)
Layout Block Visibility: This action can hide, display or toggle the visibility of a layout block on your page.
Run Javascript Function: This is for the developers among us who may want to delve into the coding side of web design. This option allows a button to trigger a Javascript function.

Once you’ve given your button a label and an action, all that’s left is to style it using all of Sparkles familiar styling options. You can set colours, fills, outlines, rounding, fonts and have different styling option for each button state.

Thinking Outside the Box

When it comes to buttons, Sparkle gives you all the options you could ever want. You’re not stuck with the same old designs that everyone uses. With Sparkle, you can get really creative. Here we illustrate a few examples of Interactive buttons and how they were created.

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 centre. Simply group the elements to make one easy-to-place object

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

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 object.

Click Here to write me an email