EverWeb Widgetbox

Button Widget

CSS Button Widget
Circle Oval Shape Shadow

Button Widget

Website Buttons Using HTML & CSS

Websites tend to require quite a few buttons - especially mobile sites. These need to be at least fingertip size for mobile devices and have rollover colors for conventional sites.

Using images for these buttons will contribute to slow loading pages and this method should be avoided at all costs on mobile sites due to the extra files that require to be downloaded and the number of extra server requests.

Click the Button Widget icon to get the widget.

Click Me

Button Settings

The button settings are shown to the right and may seem quite scary at first sight.

The settings fo height, width and button text are straightforward.

The URL for internal links may need some explanation if the website uses directories. Some info about this can be found at the bottom of this page.

Next comes the button text font family, size and color. The font choices are restricted to the recommended web safe ones.

The button background can be a single color or a gradient. For a single color, select the same one for Color A and Color B. The gradient can be set to vertical or horizontal by choosing either top or left. A vertical gradient is more suitable for most button styles.

The button corners can be rounded by using the Corner Radius control. This can be used to create a round button like the example at the top of this page.

Create a button with equal width and height and set the border width if required. The radius should equal half the button width or height plus the border width.

The button in the example has a width and height of 50px and a border width of 2px so the radius is set to 27px.

A button border width and color can be set. If no border is required, set the border width to zero.

Rollover Colors

The buttons can have different mouseover colors and gradient direction and these are set in the same way as for the static ones.

One method of creating a distinctive rollover is to use the same colors as for the button background but to reverse the order so that the top one is at the bottom on mouseover.

Next come the settings for mouseover text color and border color so that these can be varied too if required.

In general, the border width - if set - should be the same for the button and the mouseover. However, the button can be made to appear to expand or contract on mouseover by using different widths for each.

It may be worth trying this out to see if the effect is desirable for some situations. A difference of 1px is usually enough.

Obviously, all this mouseover stuff is only relevant to traditional sites. When viewed on mobile devices, there is no mouse and hover is not recognised.

On iOS devices, for example, a grey ring will appear briefly around the button to let the visitor know that it has been tapped and that something is about to happen!

Button styles can be mixed and matched or one style can be created and then the widget duplicated. Then, only the text and URL needs to be entered for each one.

Relative & Absolute File Paths

File paths for hyperlinks can be either relative or absolute. It's important to understand the difference and how these paths are determined to create the correct URL to a page or file. See THIS page for info.

Click Me
Get The Widget