‹ Home

You should give buttons more credit when building your website. They can be extremely useful guides around your content for new visitors, and emphasize new projects for your usual guests. In this week’s article, we will explore the many uses buttons, where you can add them to your liveBooks websites and how to customize them.

The many roles of buttons

Buttons increase the visibility of an item

There’s something about buttons that make people want to push them. Online or offline, if there’s a button in our vicinity, we have a hard time ignoring it. This unwritten law is what makes a button visible and clickable on your website, too. So when you’re building your website and want to make sure your visitors go to a certain page, the best practice is to link it to a button.

Create Call to Action buttons

Engage with your visitors by creating Call to Action (CTA) buttons. Whether you’re running a promotional add or opening a new store, make sure you set the tone that invites your audience to partake in this venture. Experiment with different shapes and colors. Use copy that speaks to your target audience. Make CTA buttons work for you!

Use buttons to link to your Resources

As easy as it is to add Resources on your website and linking them to buttons, there is one thing you need to take into consideration: the clutter. A couple of buttons on a page is fine, but add more and your visitors might get a little overwhelmed. See if linking to text is best suited for your particular website.

Navigational buttons

Use buttons at the bottom of the page to guide your visitors to your next portfolio. Use a button to go back to your item list. Add a contact button under your gallery widget so your prospective clients can easily reach you. The possibilities are endless.

Where can you place your buttons

Where you can and where you should are two different situations. This study shows that when we look at a webpage, our eyes follow an F-shaped pattern. This means that in order for your buttons to be seen, you should place them on the top of your page and on the left side of your website.

In the navigation bar

If you’ve chosen top or left-rail navigation, your buttons are likely to get the most of your target’s attention. To add a button to your navigation bar, follow these steps:

• Add a new page from your Content Editor.
• When prompted with the type choices, select Navigation Item.
• Enter the Navigation Item page and select Button from the Type drop-down.

• Write the copy your button will read and select the page or external link you want it to lead to.

Anywhere on a page

• Go to any content page and add a new widget.
• From the list, select Button.

• Fill in the info

In the Design Editor (New Feature!)

• In the Design Editor, select the text you want to turn into a button.
• From the pop-up select the second icon from the right.
• Set the link you want the button to lead to and you’re done!

In the footer

• Go to your Footer in the Content editor.
• Add a new widget, in our case, a Button.
• Fill in the button copy and link.

Customizing buttons

There are two ways to go about designing how your buttons will be displayed. In both cases, you will need to go to your Design Editor.

Sitewide customization

• In the design editing module located at the right of your screen, go to Sitewide – Styles – Controls.
• The button editing module will appear first.
• Edit the font, colors, corners, and borders. Want your button to change its color when someone hovers over it with their mouse? Go to the Hover tab and change the colors of your buttons’ font and background. Adjust the opacity as you see fit.

Individual modification

• Go to each page that contains a button.
• Select the button from the editing module.
• Do the necessary changes and publish your website.

 

Pro tips:

If you’re using buttons as navigational links to external pages, make sure to enable opening the link in a new tab. This will help visitors stay on your website.

Use bold colors and create a clear contrast when designing the look of your buttons. Remember, you want your clients to click on them, so make sure they see them. Also, be inclusive with all colorblind visitors that come across your buttoned-up website.

Use white space around them to make them pop. Adjust the padding on each button.

Use specific names. We’ve mentioned earlier that buttons help guide your visitors around your website. In this case, it would be great if they knew where they will be going next.

How are you using your buttons? Let us know in a comment below!

Don’t have a website with buttons so easy to use and customize? Take advantage of our 14 days free trial to create a wonderful website today!