Buttons: attention to detail

• attention, Buttons
buttons:-attention-to-detail

Anna Asano

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.

Contrast

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.

Additional button

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.

Toggle button

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!

Where to put buttons on forms

• Buttons, Where
where-to-put-buttons-on-forms

Button placement on forms is often ignored or prioritised based on what looks good.

But button placement can make or break a form, and a form can make or break a user’s experience. That’s why it’s essential to get it right.

This is more challenging that in sounds because it depends on the buttons and the form in question.

It also requires us to analyse different forms holistically. Otherwise we could end up with the same button appearing in different places which is inconsistent and confusing.

Here I’ll explain where to put buttons across a range of different forms based on research and best practice.

Align the primary button to the left edge of the inputs

Left: a right aligned button (not recommended). Right: a left aligned button (good).

In his article reporting on eye-tracking research, Luke Wroblewski says the primary button should be aligned with the left-hand edge of the input:

“illuminate a clear path to completion. Aligning inputs and actions with a strong vertical axis clearly communicates how to go about completing a form.”

This layout also helps screen magnifier users to see it without having to pan across.

Left: right aligned button when zoomed in—can’t be seen. Right: left aligned button when zoomed in—still visible.

Put the back button above the form

Left: back button next to the primary button (not recommended). Right: back button above the form (good).

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.

Research carried out by Mick Couper, Reg Baker and Joanne Mechling shows that placing the back button to the right of the primary button is confusing and it should go either to the left or underneath instead.

Underneath is preferable because it keeps the primary button consistently located and lets keyboard users tab directly to it from the last field.

But their research did not include an option with the back button at the top of the page.

Joe Lanman, a designer at the Government Digital Service, put the back button at the top of the Register To Vote exemplar digital service. It’s now the standard approach for all government services.

A question page from the Register To Vote service which shows the back link at the top of the page.

Joe said putting the back button at the top works well because it’s:

  • in a similar place to where most browsers put the browser back button
  • most likely to be needed soon after the user lands on a page that looks wrong or if the user wants to check what they just entered
  • probably not needed once the user fills out the form—if they fill out the form and click back, they will lose their answers

This approach clearly differentiates the back button from the primary button which should decrease the time it takes users to proceed. And it makes room for additional buttons when needed which I’ll cover later.

Left: ‘forgot password’ link within the form (not recommended). Right: ‘forgot password’ link outside of the form (good).

Some forms have actions that don’t submit data and are only tangentially related to the form itself.

For example, a ‘forgot password’ link on a login form lets users reset their password—but it’s not part of the login process itself.

You’ll often see the ‘forgot password’ link next to the password field, but this is problematic because users:

  • expect the tab key to focus the next field/button
  • might have to scroll to find the link
  • might waste time typing in their email address before clicking the link

Putting the link above the form solves all of these problems.

Forms with multiple buttons are problematic.

The time it takes to make a decision increases with the number and complexity of choices, so extra buttons add extra choice and extra time.

Also, keyboard users can’t be sure which action will be taken when they press the enter key to submit the form.

That said, sometimes having multiple buttons is necessary.

Thinking about what the buttons do makes it easier to decide where to put them.

Let’s look at 3 examples that need different treatment.

1. Put the cancel button below the primary button

Left: cancel button alongside the primary button (not recommended). Right: cancel button underneath the primary button (good).

Luke Wroblewski’s research shows the cancel button should be to the right of the primary button and styled less prominently as a link.

But putting the cancel button below the primary button has some advantages:

  • Firstly, it conforms to forms expert, Caroline Jarrett’s rule, make it harder to find destructive buttons.
  • Secondly, as explained in the back button and additional links sections, the cancel button is not directly related to the form itself so it makes sense to put it below the primary button.
  • Lastly, it frees up space for other, directly related buttons to be on the same row. If you put lots of buttons in a row then it’s harder for users to work out which is most important.

2. Put the ‘add another’ button above the primary button

Left: ‘add another’ button next to the primary button (not recommended). Right: ‘add another’ button just above the primary button (good).

Sometimes users need to add additional information. For example, if they need to add the names of their family members to a booking.

Putting the ‘add another’ button above the primary button has the following benefits:

  • users don’t have to go past the primary button to select it, which conforms to Caroline Jarrett’s rule, put buttons in a sensible order
  • the primary button stays consistently located on the left hand side as explained earlier
  • like Erik Kennedy explains in The 3 Laws of Locality, it’s located where it affects change—next to the field being cloned

3. Put the ‘save and exit’ button next to the primary button

Left: ‘save and exit’ button button above the primary button (not recommended). Right: ‘save and exit’ button next to the primary button (good).

Sometimes users might need to save their progress on a long form.

Putting the ‘save and exit’ button above the primary button implies it’s more important, when it isn’t.

Putting it below can cause an unwieldy list of stacked buttons and uses the area reserved for the cancel button.

That leaves us with putting it next to the primary button which makes sense as the action is directly related to the form.

In some single field forms put the button next to the input

Left: button below search box (not recommended). Right: button next to search box (good).

On rare occasions, you can put the button next to the input, which is often seen in global search forms in site headers.

While there’s nothing especially wrong with putting the button below the input, putting it next to it saves space and looks a bit neater.

But do not do this on standard forms that happen to have just 1 field. It’s inconsistent and unconventional.

Put buttons on multi select forms above the form

Left: multi-select buttons below the list (not recommended). Right: multi-select buttons above the list (good).

Multi-select forms let users select and action multiple items at once. For example, in Gmail you can select multiple emails and archive them in one go.

In this special case, put the buttons above the form.

This is another example that works because of Erik Kennedy’s rule, if a control affects change across an entire area, put it above that area.

Putting the buttons above the form also leaves room below the list for things like pagination which is often needed in these types of interfaces.

Summary

In this article, we’ve looked at where to place buttons across a range of different forms.

Whether it’s 1 button on a standard form or multiple buttons on a multi-select form, button placement is crucial and needs due care and attention.

Checklist

  • Align the primary button to the left edge of the inputs
  • Put the back button above the form
  • Put tangentially related actions above the form
  • Place extra buttons based on what they do
  • In some single field forms put the button next to the input
  • Put buttons on multi select forms above the form

Thanks a lot to Caroline Jarrett for helping me write this.

—

I write articles like this and share them with my private mailing list. No spam and definitely no popups. Just one article a month, straight to your inbox. Sign up below:

Ghost Buttons with Directional Awareness in CSS

• Buttons, Ghost
ghost-buttons-with-directional-awareness-in-css

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.

Here’s a basic starter for a ghost button:

See the Pen


Basic Ghost Button ? by Jhey (@jh3y)


on CodePen.

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:

See the Pen


Directional filling Ghost Button ? by Jhey (@jh3y)


on CodePen.

There’s a UX nitpick here. It feels off if you hover against the fill. Consider this example. The button fills from the left while you hover from the right.

Hover feels off ?

It is better if the button fills from our initial hover point.

Hover feels good ?

So, how can we give the button directional awareness? Your initial instinct might be to reach for a JavaScript solution, but we can create something with CSS and a little extra markup instead.

For those in camp TL;DR, here are some pure CSS ghost buttons with directional awareness!

See the Pen


Pure CSS Ghost Buttons w/ Directional Awareness ✨?? by Jhey (@jh3y)


on CodePen.

Let’s build this thing step by step. All the code is available in this CodePen collection.

Creating a foundation

Let’s start by creating the foundations of our ghost button. The markup is straightforward.

Our CSS implementation will leverage CSS custom properties. These make maintenance easier. They also make for simple customization via inline properties.

button {
  --borderWidth: 5;
  --boxShadowDepth: 8;
  --buttonColor: #f00;
  --fontSize: 3;
  --horizontalPadding: 16;
  --verticalPadding: 8;

  background: transparent;
  border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);
  box-shadow: calc(var(--boxShadowDepth) * 1px) calc(var(--boxShadowDepth) * 1px) 0 #888;
  color: var(--buttonColor);
  cursor: pointer;
  font-size: calc(var(--fontSize) * 1rem);
  font-weight: bold;
  outline: transparent;
  padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);
  transition: box-shadow 0.15s ease;
}

button:hover {
  box-shadow: calc(var(--boxShadowDepth) / 2 * 1px) calc(var(--boxShadowDepth) / 2 * 1px) 0 #888;
}

button:active {
  box-shadow: 0 0 0 #888;
}

Putting it all together gives us this:

See the Pen


Ghost Button Foundation ? by Jhey (@jh3y)


on CodePen.

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.

Child element with a 50% clip

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.

button div {
  background: var(--buttonColor);
  border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);
  bottom: calc(var(--borderWidth) * -1px);
  color: var(--bg, #fafafa);
  left: calc(var(--borderWidth) * -1px);
  padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);
  position: absolute;
  right: calc(var(--borderWidth) * -1px);
  top: calc(var(--borderWidth) * -1px);
}

Finally, we clip the div out of view and add a rule that will reveal it on hover by updating the clip. Defining a transition will give it that cherry on top.

button div {
  --clip: inset(0 100% 0 0);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
  transition: clip-path 0.25s ease, -webkit-clip-path 0.25s ease;
  // ...Remaining div styles
}

button:hover div {
  --clip: inset(0 0 0 0);
}

See the Pen


Ghost Button w/ LTR fill ? by Jhey (@jh3y)


on CodePen.

Adding directional awareness

So, how might we add directional awareness? We need four elements. Each element will be responsible for detecting a hover entry point. With clip-path, we can split the button area into four segments.

Four :hover segments

Let’s add four spans to a button and position them to fill the button.

button span {
  background: var(--bg);
  bottom: calc(var(--borderWidth) * -1px);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
  left: calc(var(--borderWidth) * -1px);
  opacity: 0.5;
  position: absolute;
  right: calc(var(--borderWidth) * -1px);
  top: calc(var(--borderWidth) * -1px);
  z-index: 1;
}

We can target each element and assign a clip and color with CSS variables.

button span:nth-of-type(1) {
  --bg: #00f;
  --clip: polygon(0 0, 100% 0, 50% 50%, 50% 50%);
}
button span:nth-of-type(2) {
  --bg: #f00;
  --clip: polygon(100% 0, 100% 100%, 50% 50%);
}
button span:nth-of-type(3) {
  --bg: #008000;
  --clip: polygon(0 100%, 100% 100%, 50% 50%);
}
button span:nth-of-type(4) {
  --bg: #800080;
  --clip: polygon(0 0, 0 100%, 50% 50%);
}

Cool. To test this, let’s change the opacity on hover.

button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover {
  opacity: 1;
}
So close

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.

button span:nth-of-type(1):hover,
button span:nth-of-type(2):hover,
button span:nth-of-type(3):hover,
button span:nth-of-type(4):hover {
  --clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  z-index: 2;
}

See the Pen


Pure CSS Directional Awareness w/ clip-path ? by Jhey (@jh3y)


on CodePen.

Putting it all together

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. 

button div:nth-of-type(1) {
  --clip: inset(0 0 100% 0);
}
button div:nth-of-type(2) {
  --clip: inset(0 0 0 100%);
}
button div:nth-of-type(3) {
  --clip: inset(100% 0 0 0);
}
button div:nth-of-type(4) {
  --clip: inset(0 100% 0 0);
}

The last piece is to update the clip-path for the relevant div when hovering the paired segment.

button span:nth-of-type(1):hover ~ div:nth-of-type(1),
button span:nth-of-type(2):hover ~ div:nth-of-type(2),
button span:nth-of-type(3):hover ~ div:nth-of-type(3),
button span:nth-of-type(4):hover ~ div:nth-of-type(4) {
  --clip: inset(0 0 0 0);
}

Tada! We have a pure CSS ghost button with directional awareness.

See the Pen


Pure CSS Ghost Button w/ Directional Awareness ? by Jhey (@jh3y)


on CodePen.

Accessibility

In its current state, the button isn’t accessible.

The extra markup is read by VoiceOver.

Those extra elements aren’t helping much as a screen reader will repeat the content four times. We need to hide those elements from a screen reader.

No more repeated content.

See the Pen


Accessible Pure CSS Ghost Button w/ Directional Awareness ? by Jhey (@jh3y)


on CodePen.

That’s it!

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.

See the Pen


Pure CSS Ghost Buttons w/ Directional Awareness ✨?? by Jhey (@jh3y)


on CodePen.

Top 12 CSS Close Buttons

• Buttons, Close
top-12-css-close-buttons

CSS Close Buttons

Latest Collection of hand-picked free HTML and CSS Close Buttons code examples.

1. Close Animation

Made with

  • Html / CSS(SCSS)

demo and code

2. Close button

demo and code

3. A simple but interactive close button

Made with

  • Html / CSS(SCSS)

demo and code

4. Back To Close by Ste

Made with

  • Html / CSS / JS

demo and code

5. Open / Close

Made with

  • Html / CSS(SCSS) / JS

demo and code

6. Open / Close button animation

Made with

  • Html(pug) / CSS(Sass) / JS

demo and code

7. animated close icon

Made with

  • Html / CSS(SCSS)

demo and code

8. Close button

Author

  • Paraskevas Dinakis

demo and code

9. Close button

Made with

  • Html / CSS (Less)

demo and code

10. Pure CSS close icon

Made with

  • Html / CSS (Scss)

demo and code

11. Hamburger Menu Transition to Close Button

CSS Close Buttons

Made with

  • Html / CSS(Sass) / Js

demo and code

12. three dots to close button

Made with

  • Html / CSS(SCSS) / JS

demo and code