In EverWeb 4.6 and later, use Button Styles: set up your button looks once in Format > Website Styles..., add buttons with Insert > Buttons > Button Styles, and every button that uses a style changes when you edit the style. In EverWeb 4.5, a button is a shape with a colour, your words on top and a link, styled one at a time in Inspector > Shape Options. Both ways are below.
In EverWeb 4.5, Insert > Button has ready-made buttons, such as Email Me and social media buttons. For your own wording, make one from a shape, as in the EverWeb 4.5 section.
When you'd use this
- A cafe wants an Order online button that stands out and darkens when someone points at it.
- A charity wants every Donate button, on every page, to look the same.
- A driving instructor wants a Book a lesson button that's big enough to tap on a phone.
EverWeb 4.6 and later: Button Styles
A Button Style saves a button's fill, border, corners, shadow and text colours for every state. Your project comes with Primary Button, Secondary Button, Tertiary Button, Destructive Button and Navigation Button styles. Projects made before 4.6 can add them with Add Website Styles... at the bottom of the Website Styles window.
Set up or change a style
- Choose Format > Website Styles... and click Button Styles on the left.
- Select a style, or click + below the list to add one. To start from a copy, select a style, click the settings cog and choose Duplicate. Double-click a style to rename it.
- At the top, choose Use for (the role EverWeb uses it for, such as Primary Button or Navigation Item), a Paragraph Style for the text, a Padding Preset and the text Alignment.
- Click Normal and set the Fill, Border and Corners (tick Rounded corners and set each corner) and shadow.
- Click Hover, Pressed and Keyboard Focus in turn and set how the button looks when someone points at it, clicks it, or reaches it with the keyboard. Keyboard Focus helps visitors who don't use a mouse.
- Open Preview under the list to try it: point at and click the preview. Then click Save.
Add a button that uses a style
- Choose Insert > Buttons > Button Styles and pick a style.
- Double-click the button to type your words, then link it in Inspector > Hyperlinks (see below).
- To switch an existing button to another style, select it and choose the style in the Button Style section of Inspector > Shape Options.
Navigation menu: the Navigation Bar uses a Button Style for its menu items. Select the Navigation Bar, go to Inspector > Widget Settings, open Menu Items and choose the Menu item style. See How do I add a navigation menu to every page of my website?
One-off changes: if you change a button's fill, border or shadow directly, that button stops following its style and keeps its own look. To make it match again, click Relink to... in the Button Style section.
Website Styles also hold your Paragraph Styles, colours, Shape Styles, Spacing Presets and Corner Presets. Read more on the EverWeb blog.
EverWeb 4.5: make a button from a shape
Make the button
- Click Shapes in the toolbar and choose the rectangle.
- Double-click the shape and type your words, such as Book a lesson. Style them in Inspector > Text, or give them a Paragraph Style (see Keep your text consistent with Paragraph Styles).
- In Inspector > Metrics, set the size. About 44 pixels tall or more is common guidance for something people tap on a phone.
You can also use a TextBox: give it a Color Fill and it works the same way.
Colour, border, corners and shadow
All of these are in Inspector > Shape Options:
- Fill: choose Color Fill for one colour, or Gradient Fill or Advanced Gradient Fill for a blend.
- Rounded corners: under Border Options, tick Custom border radius and type a number in the corner boxes. 8 gives softly rounded corners. Half the button's height gives fully rounded ends.
- Border: under Border Options, set Stroke to Line, then choose solid, dashed or dotted, a colour and a thickness.
- Shadow: tick Shadow and choose Color. Set Offset, Blur and Opacity. A small offset with a soft blur looks most natural.
Using the Rounded Rectangle shape? Its corners are set in its Widget Settings instead. A plain rectangle with Custom border radius is easier to control.
Change the look on hover and click
- Select the button. In Shape Options, the Fill heading has a menu that shows Normal. Click it and choose Mouse Over.
- Set the colour for when the pointer is over the button, such as a slightly darker shade.
- Each state keeps its own settings. If your button has rounded corners or a shadow, set them in Mouse Over too, or they'll change when the pointer arrives.
- Choose Mouse Down from the same menu and set the look for the moment it's clicked.
- Choose Normal again before making other changes.
- Open Mouse Transitions & Animations and set Transition time (0 to 500) for a smooth change between looks. Higher numbers are slower.
Want the words to change colour too? Double-click the button, highlight the words and link them (see below). Then, under Hyperlink Formatting in Inspector > Hyperlinks, set Normal to your text colour and Mouse Over to the hover colour.
Hover looks don't show in the editing window. Click Preview to try them.
Link it
Click the button once, so the whole button is selected. Go to Inspector > Hyperlinks, tick Enable as Hyperlink, and choose where it goes in Link To. See How to link to another page, a website, an email address, a phone number, a PDF, or a section of a page.
Make the others match
With Button Styles, every button that uses a style already matches. In EverWeb 4.5, hold Option (Mac) or Ctrl (Windows) and drag the finished button to make a copy. You can also use Edit > Copy and Edit > Paste, including on another page. Copies keep the colours, corners, shadow, hover looks and link. Change the words and the link on each copy.
Phones have no hover
Phones and tablets have no pointer, so visitors there won't see the hover look. Make the normal look clearly a button: a colour that stands out from the page, space around the words, and a comfortable height. Check it on your phone with Preview > Preview QR Code.
Common problems
| What you see | What to do |
|---|---|
| Nothing changes when you point at the button in EverWeb | That's expected. Use Preview. |
| A button no longer changes when you edit its Button Style | It was changed directly, so it has its own look. Click Relink to... in the Button Style section of Shape Options. |
| Rounded corners or the shadow disappear on hover (4.5) | Choose Mouse Over in the Fill menu and set the same corners and shadow there. |
| Only the words are clickable | Click the button once (not inside the text) and link the whole button. |
| The words turned blue or purple after linking | Hyperlink Formatting colours replace the text colour. Set Normal and Visited to your text colour. |
| Buttons on different pages look slightly different | In 4.6, apply the same Button Style to them. In 4.5, delete the odd ones out and copy your finished button instead. |