• Oscar Martinez (Valerock)

The hardest button to button

Updated: Nov 11

Every time I work creating buttons, I can't stop humming the White Stripe song "The hardest button to button;" I believe this is because I know that creating a great button, or a collection of them, is very complicated.


Today I will share a recipe for a button that I recently created for a Power BI report.


If you haven't yet read my buddy Raziel's excellent post on buttons, this will be a great chance to take a look as he does a deep dive into buttons theory: How to create a Navbar using buttons in Power BI.


RED BUTTONS

Power BI Button in different states
Power BI button in different states

This button is designed for a time tracking application with two main views: an "Overview" page and a "User detail" page.


To obtain the desired result, I had to create two different versions of the button for each section: one for the selected state and the other that gathers the "Default," "Hover," and "Press" states.


This project uses red as its primary color, but you should feel free to use any color that matches your design.


1. Download the required icons

I (almost) always use "Remix Icon" for getting the icons I will use in my buttons; in this case, for each button, you will need a white icon (HEX #FFFFFF) and a grey icon (HEX #E6E6E6); both icons with a 64px size.


2. Create the "Selected" state icon.


We only need to apply the settings to the "Default" state in Power BI for this button.


Text: Montserrat 9, white color, centered horizontal alignment, middle vertical alignment, padding: top 4, right 4, bottom 4, and left 20px.

Icon: Icon type custom (white version.) horizontal alignment left, vertical alignment middle, padding 4px on all sides.

Fill: Solid color (in this case, red HEX #FF0020), with no transparency.

Shadow: Black, 75% transparency and 35px blur, position bottom right.

Border: off.

Glow: off.


3. Create the second button.

This button will be slightly more complex as we will need to apply different styles to the other states:


3.1 Default state:

Text: Montserrat 9, black color, centered horizontal alignment, middle vertical alignment, padding: top 4, right 4, bottom 4, and left 20px.

Icon: Icon type custom (grey version.) horizontal alignment left, vertical alignment middle, padding 4px on all sides.

Fill: White, no transparency.

Shadow: Black, 100% transparency and 35px blur, position bottom right.


3.2 On hover state:

Text: Montserrat 9, a slighter clear black color (in my case HEX #434F53), centered horizontal alignment, middle vertical alignment, padding: top 4, right 4, bottom 4, and left 20px.

Icon: Icon type custom (white version.) horizontal alignment left, vertical alignment middle, padding 4px on all sides.

Fill: A very light version of the solid color from the "Selected" state (in this case, HEX #FDF5F6).

Shadow: Black, 100% transparency and 35px blur, position bottom right.


3.3 On press state:


Text: Montserrat 8.8, white, centered horizontal alignment, middle vertical alignment, padding: top 4, right 4, bottom 4, and left 20px.

Icon: Icon type custom (white version.) horizontal alignment left, vertical alignment middle, padding: top 5px, right 4px, bottom 5px, left 5px.

Fill: A "lighter" version of the solid color from the "Selected" state (in this case, HEX #F8CBD3).

Shadow: Black, 90% transparency and 35px blur, position bottom right.




120 views

Recent Posts

See All