Mac SEO Blog

One of the common objects used in website design is the humble button.  Typically the primary function of a button is to trigger an action of some sort. This ‘trigger’ could be a hyperlink to another page, a place somewhere else on your current page or to an external website. Buttons can also used to initiate downloads, payment processes, send emails and so on.

Some of EverWeb’s widgets use buttons e.g. the Contact Form, Contact Form Advanced and also the PayPal widget which also let’s you create your own buttons if you don’t want to use the default ones PayPal offers.

Creating Your Own Button

If you want to create buttons for your own website, you can easily and quickly do in EverWeb. There are a few simple steps required as outlined below. In our example we will be recreating a button from the Modern Theme Template which is a new Theme Template coming in EverWeb version 2.6. If you download and install the Modern Theme Template, EverWeb will ask you if you want to install the ‘Work Sans’ font during the installation process. You can also install the Work Sans font directly via the Google Fonts website.

Let’s create a button in EverWeb…

Create and Style Text in a TextBox

1. First create a TextBox by clicking on the Textbox button in the Toolbar. Replace the default text with “Show me more”.
2. Make sure that the text you have just added is highlighted, then click on the Fonts button in the Toolbar.
3. Change the default text font (Arial) to ‘Work Sans’ from the Fonts Panel.
4. Change the font weight to Extra Bold.
5. The font size should also be changed from the default 12 to 18 point.
6. The font color should be changed black to white and again this can be done directly in the Fonts Panel.
7. Once finished, close the Fonts Panel and resize the shape so all of the text appears on one line.
8. Now the text will need to be centered within the text box so with the text highlighted go to the Text Inspector.
9. Change the Horizontal alignment from left aligned to Center alignment.
10. Changethe Vertical alignment to middle from top.
11. You will notice that the text is still not in the centre of the box as After Paragraph is set to 15 by default. Change this setting to zero.
12. The text should be centered but if it is not check to make sure that the Inset Margin setting is zero.
13. The text is now centered.

Creating and Styling the Button

Now that the text we want has been created, styled and centered within the TextBox, the next stage is to create the button to go around the text.

1. Next go to the Shape Options and change the Shape from default to rounded rectangle. This creates the shape of the button.
2. Set the fill type to Gradient fill as this is the type of fill used on the original button.
3. Change the colors to match those in the example. The top color swatch should be ‘Tomato’ color and the bottom color swatch should be ‘Tangerine’. This will give you an approximate color match with the original button.
4. Next add a line border using the Stroke options. Create a white coloured border with a 3px width.
5. Adjust the button size until you have the look you want.
6. Use the blue dot in the rounded rectangle shape to alter the roundness of the button’s cornersas required or use the shape’s widget settings.

Adding an Animation To The Button

When using the Home page of the Modern Theme Template, you will see that the button, and the headline text, has been animated.  To animate the button:

1. Select the button.
2. Go to the Shape Options button in the Inspector Window.
3. Tick the checkbox to the right of the text ‘Animations’ to activate the settings.
4. Set the animation type to Fade from Bottom.
5. Set the duration of the animation to 1.0 second.
6. Set the animation delay to 0.2 seconds.

Hyperlinking the Button

The last step in setting up our button is to add a hyperlink to the scroll down the page. The Home page of the Modern Theme Template includes a scroll position line (in blue) which the button can be hyperlinked to. When pressing the button, the page will scroll down to the scroll position line. Scroll Posiotn is available in EverWeb version 2.6. If you are using an earlier version of EverWeb, you could replace the instructions below with e.g. hyperlinking to a different page in your website.

1. If you want to insert your own scroll position line, click on the Scroll Position button in the Toolbar or use the Insert-> Scroll Position menu option. Drag and drop the turquoise line to where you want it on the page. You may also want to name the Scroll Position using the Widget Settings.
2. Next, click on the button text, then go to the Hyperlinks Inspector.
3. Tick to ‘Enable the Hyperlink’.
4. Set the ‘Link To’ option as the page that you are currently on.
5. Set the ‘Position’ field to the Scroll Position you want, wither the one that is already on the page, or to the one that you have created.
6. If you are using a version of EverWeb prior to version 2.6, replace steps 4 and 5 as follows: Set ‘Link To’ as the page you want to hyperlink. The Position

You have now finished setting up your button! Preview to test that your button looks and works as you expect before publishing to the Internet. Creating buttons in EverWeb is easier and you can add your own flair and style in your own design. You can even animate your button to bring extra attention to it!

If you have a question about this blog post, please let us know in the Comments Section. We’re always happy to help!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw