1 - We start with a basic html button
2 - Add padding around the element
Dimensions are set in em instead of px in order to keep proportions with the font size.
Even if you make the button size bigger, the spacing proportions would be proportional
3 - Update font-size to show proportions are kept
4 - Add a nice border-radius
5 - Define a hover state
As you notice, the color change is a bit fast.
In order to make it slower we need to add a transition
6 - Add a transition to color and background color
As you notice, the color change is a bit fast.
In order to make it slower we need to add a transition
🎉
If you enjoyed this tutorial, share it to other people !
Every week, I publish a new tutorial / section.
Follow me on twitter to be notified when a new section is out (every week)
If you have any question or suggestion, please reach out on twitter also 🤗