Creating micro-interactions for beginners

Quick guide on micro-interactions
- Layout my HTML content
- Css styling
- Selectors and hover
- 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!
