development

Buttons and their Use Cases

April 1, 2021

1 min read

Buttons are a vital part of any website. There are different kinds of interactions that we can perform on a button from hover state to being active state.

Always code for accessibility when you are styling anything.

Let’s start with this very simple button that we are going to manipulate using outline and background color.

1. Solid Button

barbarbarbar

Please view on larger screens for better understanding and experience.

As you can notice, the buttons are not too fancy. Just a subtle change in the color and the outline for two different states.

const SolidButton = styled.button`
  background: #627D98;
  padding: 11px 49px;
  border: none;
  border-radius: 10px;
  font-family: Inter, Arial;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border: 4px solid #fff;
  outline: none;
  margin: 2rem auto;
  &:focus, &:hover {
      background: #334E68;
  }
  &:focus, &:active {
      background: #D9E2EC;
      border: 4px solid #627D98;
  }
`

Practical usecases :

  • When specifying primary action buttons.
  • For showcasing critical actions.

2. Outlined Button

foofoofoofoo

Please view on larger screens for better understanding and experience.

Again, the buttons a subtle change in the background color on hover and border when active.

const OutlinedButton = styled.button`
  background: transparent;
  padding: 11px 49px;
  border: none;
  border-radius: 10px;
  font-family: Inter, Arial;
  color: #627D98;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid #627D98;
  outline: none;
  margin: 2rem auto;
  &:focus, &:hover {
      background: #334E68;
  }
  &:focus, &:active {
      background: #627D98;
      border: 4px solid #627D98;
  }
`

Practical usecases :

  • When specifying secondary action buttons.
  • As a sub-action button.