Creating micro-interactions for beginners

Issac Z Ting
Sep 9, 2018 · 2 min read

Quick guide on micro-interactions

  1. Layout my HTML content
  2. Css styling
  3. Selectors and hover
  4. Transitions

Let’s start with a break down. HTML is the <> brackets, it is used to layout your content. Think of it like boxes and content.

So we laid out out HTML in the following manner.

This currently looks pretty meh but let’s go through it a little.

<div class=”player-card”> Defines the large card with a shadow
<div class=”cntr”> Contains the two buttons
<button class=”button-two”>SUBMIT</button> defines the top button
<div class=”button-bg”> </div> defines the background button
</div></div>

So far so good?

CSS STYLING

Each div has a class tied to it. This will give it the css properties which we will use to style it.

Alright here we are adding in the css properties. This will define how the buttons look.

We used transform:translate to offset the position of the buttons.

background, color, margin are pretty straight foward.

Next

Hover and Selector

.cntr:hover .button-bg{
transform:translate(15px,-30px);
}
.cntr:hover .button-two{
transform:translate(-1px,-2px);
}

.cntr:hover is the parent of .button-two. We want the transformation to trigger when you click the button, not just the text itself. But we want the transformation to happen to the button itself. We refer to this as ‘selectors’.


Transitions

You will also need to add

transition: .2s ease-in-out; into your button class to smooth out the transitions.

Alright there we have it!

Have fun!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade