Flexbox Button Quickie
Developing my portfolio site I needed a button that would behave predictably across all platforms.
So I made one using the flexbox layout. Here’s how and why I did it.
A Flexbox container modifies the width or height of its children(items) to fill space across the main and cross axis (x, and y axis). In the case of my button it is treated as an ‘item’.
I ultimately set my button to predictably align itself in the middle of any container axis which saves me time from adjusting floats or margins across media queries for different screen sizes.
What i’m left with is a simple button that I can easily drop into any projects without much tinkering to the existing css besides changing the button’s container attributes display to flex and align items to center.
Button Style
Raising buttons add dimension. For UX it’s important to make buttons look and behave like buttons.
Some neat tricks I used involve text-rendering, and font-smoothing to make the button look very crisp and sharp.
I also used scale transform instead of a zoom so I can slow down the button’s transition speed to correlate with the box-shadow’s transition speed for the hover animation.
Conclusion
Flexbox is a great way to make complex layouts that behave predictably. In my scenario I used it for a simple button but there’s plenty of other ways flexbox will come in handy and I recommend learning how to use it. Below are some great starting points in understanding flexbox.
