logo

Web UI Elements Styling

- May 30, 2020

Photo by Mohdammed Ali on Unsplash

UI Elements have a default style but can be improved.

Buttons

Buttons should not trigger navigation to another page. Navigation is reserved to links. As such, buttons are reserved for in-page actions and are mostly found in single page web-apps.

The button default font-size is 11px. It's way too small and should be set to a bigger size. Setting a bigger font-size will replace the default appearance with another default appearance, with a gray gradient background and squared borders. We replace the gradient with either a transparent background or a plain color background. The border can be slightly rounded.

In a plain button, the color background acts as the body of the button. As such, it doesn't need a border. The text color must be set to white to create a sufficient contrast with the plain color background.

In an outline button, the border acts as the boundaries of the button, while the body remains white or transparent. In that case, the border is important and can have the same color as the text.

By default, buttons padding is too small. The body of the button needs to be bigger than just the text size. We add a bit of vertical padding, such as 0.5 em. And then we add a bigger horizontal padding, such as 1 em.

button{ font-size:1em; font-weight:500; background:transparent; border:2px solid black; border-radius: 3px; padding:0.5em 1em; cursor:pointer; text-transform:uppercase; margin-right:0.5em; }

Buttons behaviour

Because we have opt-out of the default styling, the button lost its "on-hover" visual feedback. We need to manually add it back. Using a translucent background makes the button nicely blend with its container background color, while still indicating that the button is "hovered-on".

To make the button feel more responsive, we can optionally add a slight animation when the button is pressed. A small translation towards the bottom gives the impression of a solid button being pressed. Another option is to scale down the button slightly.

button:hover{ background:rgba(20,20,20,0.1) } button:active{ transform:translateY(1px); // transform:scale(.99); }

Links and Button shaped links

By default, links are underlined. Nowadays, links don't need to be underlined. They are recognisable through their distinct color. Underlining should only happens when the user hovers on the link.

Button shaped links have a button appearance and convey the meaning of an important link that represents going one step forward in the navigation flow. They lead to a new page. They are styled like buttons so that they stand out more compared to simple inline links.

As such we can use the style defined for either a plain button or an outline buttons, while keeping the general rules that apply to links. They need a few additional tunings: they must be changed from inline to inline-blocks and their color must be reverted to initial.

a.buttonShape{ display:inline-block; font-weight:500; border:2px solid black; border-radius: 3px; padding:0.5em 1em; text-transform:uppercase; margin-right:0.5em; text-decoration:none; color:initial; }

You can find the result in action on this codepen.

Icons

Icons are small images that give a visual clue. They are best included as SVG.

Tables

The structure of a table is a bit heavy. The two main subcategories are thead and tbody. In the thead, a unique row represented by tr contains a list of headings th. In the tbody, each row represented again by a tr contains a list of data td.

<table> <thead> <tr> <th>Name</th> <th>Race</th> <th>Class</th> <th>Level</th> </tr> </thead> <tbody> <tr> <td>Laddyvia</td> <td>Human</td> <td>Warrior</td> <td>60</td> </tr> </tbody> </table>

By default, the cells are clumped up together without enough space. To improve the visual experience, it's best to give some padding to each cell, such as 1em.

By default, the table comes with no borders at all. It's best to add a border that separates each line (row) of the table. To do that, we cannot set a border at the tr level. As a result, we need to set the border at the td and th level. To avoid layout side-effects, we need to change the border behaviour so that borders don't take their own space and simply merge with each other when needed. This is called border collapse. The table also needs an exterior border, set at the table level. Finally, each cell on a line can have its own border with the next cell, but this is optional.

By default, all lines have the same background-color. It's best to alternate between two colors, so that each line stand out a bit more compared to its previous and next line.

table { border-collapse: collapse; border: #333 solid 3px; } td, th { border-bottom: black solid 2px; padding: 1em; /* border-right:black solid 1px; */ } tr:nth-of-type(2n) { background: #eee; }

You can find the result in action on this codepen.