DEV Community: Ammadeo

Three more satisfying buttons and how to make them

Ammadeo — Fri, 30 Jul 2021 14:24:07 +0000

Satisfying buttons can take many forms. Let's see three more!

Glowing button

This button is made of glass and has a colourful light inside. The light follows a user's interactions — like mouse movement.

Let's see it in action

How to implement it

I'd say upfront the implementation is not beginner-friendly.
Firstly We'll use inner shadows to make a glass-like effect.
If You want to learn more about Glassmorphism, check out New Glassmorphism? How to Create Neon Glass Effect UI Design by
Przemysław Baraniak.

button {
  /* Background color in HSL 
     It's "raw" because it needs to work with custom alpha */
  --color-background-raw: 4, 12%, 16%;

  /* Glass effect inner shadows */
  box-shadow:
    inset 0 2px 1px 0 hsla(0, 0%, 100%, 0.4),
    inset 0 2em 2em 0 hsla(0, 0%, 100%, 0.12),
    inset 0 -3px 0.25em 0 hsla(0, 0%, 100%, 0.12),
    inset 0 -0.25em 1em 0 hsla(0, 0%, 100%, 0.12),
    inset 0 -2em 2em 0 hsla(var(--color-background-raw), 0.05),
    inset 0 0.25em 0.5em 0 hsla(0, 0%, 100%, 0.2);
}

Next, we'll use the after pseudo-element as a glowing circle following a user's interactions. Let's make use of the CSS Properties and Values API. This API allows us to define types of CSS Properties, which is needed to animate them.

/* Use CSS Properties and Values API
It enables transitions for css properties 
*/
/* Will control the left position of the glowing circle. */
@property --glow-left {
  /* Allow any length or percentage e.g. 1px, 1em or 20% */
  syntax: '<length-percentage>';
  /* Allow children elements to inherit this property */
  inherits: true;
  /* Set default value */
  initial-value: 50%;
}
/* Will control the top position of the glowing circle. */
@property --glow-top {
  syntax: '<length-percentage>';
  inherits: true;
  initial-value: 50%;
}

/* Glowing circle */
button.glow::after {
  /* Make sure it shows */
  content: "";

  /* Position it */
  position: absolute;
  top: var(--glow-top);
  left: var(--glow-left);
  /* Keep it centred */
  transform: translate(-50%, -50%);

  /* Make it smooth!
     This is why we need CSS Properties and Values API
   */
  transition: 
    top 80ms linear,
    left 80ms linear;
}

Let's use a bit of JavaScript to control them.

// Select the button
const Button = document.querySelector("button.glow");

// Set glow position css properties
const setGlowPosition = (event) => {
  // Get the event's coordinates relative to the button
  const { left, top } = event.target.getBoundingClientRect();
  const offsetX = event.clientX - left;
  const offsetY = event.clientY - top;

  // Prevent setting position on keyboard click
  if (offsetX > 0 && offsetY > 0) {
    // wait for animation frame for better performance
    requestAnimationFrame(() => {
      // set css property
      event.target.style.setProperty("--glow-left", `${offsetX}px`);
      event.target.style.setProperty("--glow-top", `${offsetY}px`);
    });
  }
};

// Set glow position on mousemove (mouse) and click (touch and keyboard)
Button.addEventListener("mousemove", setGlowPosition);
Button.addEventListener("click", setGlowPosition);

Plastic button

The button will deform inwards on press.

Let's see the implementation

How to make it?

To make a neuromorphic button, we need to give it a few shadows. By default, we want to make it look raised.

button {
  /* Add outside shadows */
  box-shadow: 
    /* Top left white shadow */
    -4px -4px 16px 0 hsla(0, 0%, 100%, 0.14),
    /* Bottom right black shadow */
    4px 4px 16px 0 hsla(0, 0%, 0%, 0.14);
}

/* On button press */
button:active {
  /* Add inside shadows */
  box-shadow: 
    /* Inner top left black shadow */
    inset -4px -4px 16px 0 hsla(0, 0%, 0%, 0.14),
    /* Inner bottom right white shadow */
    inset 4px 4px 16px 0 hsla(0, 0%, 100%, 0.14);

  /* Make it a bit darker */
  filter: brightness(0.96);
}

Don't forget about UX! Let's add a light border around it to make it easier to spot.

button {
  /* Add glass-like border  */
  border: hsla(0, 0%, 100%, 0.2) 1px solid;
}

Learn more about plastic like buttons from Neumorphism in user interfaces by Michal Malewicz.

Simple button

Not every satisfying button must be hard to implement. This simple button will use only small transitions and shadows to make it feel great.

How does it look?

Let's make it

The implementation will be very similar to the one in the first part of this series. So if You didn't read it, do it now.

button {
  /* Use realistic shadows */
  box-shadow: 1px -1px 2px 0 hsla(0, 0%, 0%, 0.06),
              3px -3px 4px 0 hsla(0, 0%, 0%, 0.08);

  /* Make sure that transform-origin match translate() direction. 
     It makes translate() and scale() work it the same axis */  
  transform-origin: bottom center;
}

/* On button press */
button:active {
  /* Make shadows much smaller */
  box-shadow: 0 0 1px 0 hsla(0, 0%, 0%, 0.06),
              1px -1px 1px 0 hsla(0, 0%, 0%, 0.08);

  /* Apply perspective transformation */
  transform: 
    /* Translate down on Y axis */
    translatey(0.25em) 
    /* Make button smaller */
    scale(0.98);
}

Challenge for You

Make Your satisfying button and share it in a comment below. I'd love to see it!

Set up TalkBack like a pro! In just a few minutes!

Ammadeo — Fri, 23 Jul 2021 13:10:26 +0000

You'll learn how to set up TalkBack for the best developer experience.

Make sure You have TalkBack

TalkBack is part of the Android Accessibility Suite. You can check if You have it installed in the GooglePlay store.

Let's turn it on

Go to your phone settings and search for TalkBack. Turn TalkBack on by toggling the Accessibility switch.

TalkBack is off screenshot

Allow TalkBack all of those permissions. Don't worry. TalkBack is easy to turn on and off by holding volume up and down buttons at the same time for a few seconds.

Permissions popup screenshot

Now TalkBack will show You a quick interactive tutorial. Feel free to do it. After that, we'll get to the next step.

Set it up like a pro

Firstly You can now turn TalkBack off, so it will be a bit easier. You can also disable TalkBack watermark — it only says how to disable TalkBack with volume buttons shortcut. Now go to TalkBack's settings by pressing the button on the bottom of the screen.

Settings button is on the bottom of the screen

Audio settings

From here, You can change how TalkBack will sound.

TalkBack settings screenshot

Firstly go to Text-to-speech settings.

You can choose Your preferred text-to-speech engine. If You use the Google Text-to-speech engine, You can go to its settings and install voice data for languages You usually use. You can also change to Your favourite voice for every language from there. Additionally, if You develop multilingual websites changing Language detection to Aggressive might improve audio quality.

Install voice data button is on the top of the screen

Go back to TalkBack audio settings.

Disable Speak passwords

You probably want to disable that so You don't accidentally give away your password.

Controls settings

From here, You can change how You'll interact with TalkBack.

Customise gestures

Gestures are the most crucial part of TalkBack. They allow You to perform all TalkBack actions. We'll go deeper into them in the next part of this series.

Scroll to 1 finger back-and-forth section.

Change Swipe left then right and swipe right then left to Read from next item. This shortcut will help You quickly read the whole article without the hassle of swiping right for every next paragraph.

1 finger back-and-forth section in Customise gestures

Go back to TalkBack controls settings.

Customise menus

If You don't use TalkBack as Your main user interface, You may remove some redundant features from quick menus.

Customise TalkBack menu

Here You can change what will be in the TalkBack menu popup.
Disable read from next item — We've already added it as a swipe left then right gesture.

Reading section in Customise TalkBack menu

Customise reading controls

Reading controls change what happens on swipe down and swipe up gestures.
Disable reading by Characters, Words and Lines — They're a bit redundant if You use TalkBack with Your screen turn on.
Enable reading by Landmarks for testing a website's landmarks. Landmarks are sections of the website. Think of them as HTML5 header, main, footer etc. They'll help You quickly jump to any part of the website. You can learn more about them from Use landmarks by Rob Dodson.

Reading section in Customise reading controls

Open Advanced settings to find Developer settings

Inside of Developer settings, You'll find some helpful debugging tools.
Enable Display speech output and Echo recognised speech. Displaying speech output will help You debug the accessibility tree of an application. Echo recognised speech will tell You about problems with Your voice command.

Developer settings

What's next?

That's all set up! Let's learn how to use it in the next part of this series. Available soon.

Why should every DEV use a screen reader? The answer might surprise You.

Ammadeo — Sat, 17 Jul 2021 13:16:00 +0000

As a developer, You probably know the pain of eyestrain. Screen readers may come to the rescue.

How will it help Me?

You read docs and articles every day. They sometimes don't even provide You with a dark theme! To save Your eyes, let's make a screen reader read them for You.

Additional benefit

When using a screen reader, You get better at designing an accessible user experience. For instance, You'll quickly find out how crucial semantic HTML is in helping You jump through websites' sections with ease.

Word of caution

Using a screen reader might take some time to master. It's similar to learning to write fast on a keyboard. It takes practice, but it's also quite rewarding.

What screen reader should I use?

There are plenty of screen readers available. My personal favourites are TalkBack for android and NVDA for windows. I've heard a lot of good opinions about VoiceOver for Mac too. For the first one, I recommend You to check out TalkBack. It's the most user-friendly.

Art of making satisfying buttons

Ammadeo — Wed, 07 Jul 2021 13:28:32 +0000

There is only one rule of making a satisfying button. When You press it, You need to feel the same as pressing a physical one.

Create cohesive 3D space

When You create a website, You need to imagine how it looks in 3D space. Why bother? Because every time You use a shadow, You simulate that the element is either thicker or floating. Understanding 3D will help You fake depth later with CSS. Let's start with shadows.

Make shadows feel real

Shadows get smaller on the button press.

Firstly there are no shadows without the light. Ask Yourself:

Where is the website's light source?
How strong is it?
How diffuse is it?

Answers for the above will help You decide what shape of shadows You should use and how to animate them.
Besides the light, there is only one more rule to follow:

The thicker the button, the longer and more diffuse shadows are.

Let's add some shadows



button {
  /* Use realistic shadows */
  box-shadow: 1px -1px 2px 0 hsla(0, 0%, 0%, 0.06),
              3px -3px 4px 0 hsla(0, 0%, 0%, 0.08);
}

/* On button press */
button:active {
  /* Make shadows much smaller */
  box-shadow: 0 0 1px 0 hsla(0, 0%, 0%, 0.06),
              1px -1px 1px 0 hsla(0, 0%, 0%, 0.08);
}

Learn more about realistic shadows in The master guide to smooth, realistic shadows in CSS by Devang Saklani.

Remember about perspective

The button gets smaller on press.

Firstly what is perspective?

Simply put, perspective is an optical illusion that makes things further away appear smaller.

Perspective in web design

In web design, we need to fake the perspective. To do that, You can make floating elements larger than those below them. In the case of a button, it'll get smaller on press.
That might be enough, but if You want to make perspective more obvious, You may want to show the side of a button. It'll feel like looking at the interface from an angle.

How to implement perspective?



button {
  /* Make sure that transform-origin match translate() direction. 
     It makes translate() and scale() work it the same axis */  
  transform-origin: bottom center;
}

/* On button press */
button:active {
  /* Apply perspective transformation */
  transform: 
    /* Translate down on Y axis */
    translatey(0.25em) 
    /* Make button smaller */
    scale(0.98);
}

For more insight on perspective, check out Fix Your Perspective by Matt Kohr.

Make it move

Bear in mind, adding transition is not always necessary for small scale transformations. It's like in classic animation. Our mind will fill the gaps.
In the case of buttons, we may use a brief transition to keep them pressed for a bit longer. It'll help the user to see the impact of clicking it.

How to add transition?



button {
  /* Add short transition with a delay 
     This transition will control second half of the animation */
  transition: 
    transform 50ms ease-in 10ms,
    box-shadow 50ms ease-in 10ms;
}

/* On button press */
button:active {
  /* Add short transition
     This transition will control first half of the animation */
  transition: 
    transform 50ms ease-in,
    box-shadow 50ms ease-in;
}

For the best guide on animation — check out 12 Principles of Animation by Frank Thomas & Ollie Johnston.

Let's see the implementation

One last tip

To optically centre a button's content, try moving it up a bit.



button {

  padding-top: 1rem;

  /* Make bottom padding slightly larger */

  padding-bottom: 1.05rem;

}

Challenge for You

Go and press some buttons around You. For science!