Buttons are an important component of any website. They allow users to interact with the site. But we often forget how important they really are … If everything is done correctly, buttons can improve the common user experience, and finally bring more income for the business.
Buttons are key elements of each interface, so it is important to consider them with attention to details such as the indents, size , location and accessibility.
Depending on the style and tasks of the site, there are many variations of how the button may looks like. This article provides examples of the most basic.
The main button on the site should always be contrasted. To perform the main action on the site, the user should not have doubts that he is doing something wrong. To do this, it is important to use contrasting colors for the button and text. Also, the wording of the text on the button should clearly convey the essence.
In poor lighting conditions, a dim monitor screen, or for people with poor eyesight, a slight difference between the color of the button and the text can be difficult.
Also it is important to say about inactive buttons. Usually they are needed if the user has filled out the information in the form incorrectly. In this case, better to re- think about the situation and with poor visibility and not to use transparency or color change to gray (as an example). The reason why the button does not work is better to write for the user either next to the button, or to shift the user’s attention to a specific field where there was an inaccuracy. This will not cause unnecessary questions for the user and his time will not be spent figuring out why he can not proceed to the next step.
If the site has an additional offer for users, it makes sense to place it next to the main action, and not take users away, for example, to the block below. For a secondary button, a less bright fill color is usually used, or only the stroke is left.
Usually used to switch states in an application. They save space, as they immediately show the user several options.
Inverted colors are often selected for the toggle button, thereby confusing for some users. Many mistakenly choose a lighter color as active. Instead, you can use colors in one direction, then the change of state is more clear, and there will be no doubt in the user.
Delete / Close Buttons
Special attention should be paid to the “ Close ” and “ Delete ” buttons. In general, the same rules work for them, but there are exceptions .
There are two layout options for the “Close” or “Cancel” button. The first option is next to the active action button, but then it makes sense to make it less bright. The second option is in the form of a cross and in the upper corner of the page or form.
It is important to remember here that if the action is irreversible, then sometimes it makes sense to make the “Close” button brighter. It is also possible to swap the “Ok” and “Close” buttons. In this case, if the user clicks automatically, it will be the “Cancel” button, which means that he will have some more time to realize the action.
As a result, in addition to the main button on the site, there are many additional buttons that are also important to pay attention to. Then the priorities for users will be clearly arranged, and the interface will be holistic and clear. Thank you for reading!
Some forms or questionnaires appear across multiple pages and some people want to go back to check or change their answers.
Unfortunately some users don’t trust the browser back button because of their experiences of poorly designed forms that lose data when they click back. The solution is to provide a form-specific back button.
It would surprise me if you’d never come across a ghost button ?. You know the ones: they have a transparent background that fills with a solid color on hover. Smashing Magazine has a whole article going into the idea. In this article, we’re going to build a ghost button, but that will be the easy part. The fun and tricky part will be animating the fill of that ghost button such that the background fills up in the direction from which a cursor hovers over it.
In most cases, the background-color has a transition to a solid color. There are designs out there where the button might fill from left to right, top to bottom, etc., for some visual flair. For example, here’s left-to-right:
Great! We have a button and a hover effect, but no fill to go with it. Let’s do that next.
Adding a fill
To do this, we create elements that show the filled state of our ghost button. The trick is to clip those elements with clip-path and hide them. We can reveal them when we hover over the button by transitioning the clip-path.
They must line up with the parent button. Our CSS variables will help a lot here.
At first thought, we could have reached for pseudo-elements. There won’t be enough pseudo-elements for every direction though. They will also interfere with accessibility… but more on this later.
Let’s start by adding a basic fill from left to right on hover. First, let’s add a div. That div will need the same text content as the button.
Now we need to line our div up with the button. Our CSS variables will do the heavy lifting here.
Uh-oh. There’s an issue here. If we enter and hover one segment but then hover over another, the fill direction would change. That’s going to look off. To fix this, we can set a z-index and clip-path on hover so that a segment fills the space.
We know how to create the fill animation, and we know how to detect direction. How can we put the two together? Use the sibling combinator!
Doing so means when we hover a directional segment, we can reveal a particular fill element.
First, let’s update the markup.
Now, we can update the CSS. Referring to our left-to-right fill, we can reuse the div styling. We only need to set a specific clip-path for each div. I’ve approached the ordering the same as some property values. The first child is top, the second is right, and so on.
With a little extra markup and some CSS trickery, we can create ghost buttons with directional awareness. Use a preprocessor or put together a component in your app and you won’t need to write out all the HTML, too.
Here’s a demo making use of inline CSS variables to control the button color.