Create a Scale out of Buttons - Workaround

Abby Updated by Abby

Sometimes we may want custom numbers in our scales, as this isn't currently an option in the scale block, you can use buttons with CSS to achieve the appearance of a scale.

The builder:

The CSS:

/*Button height and width*/

[data-block="Nkppecwnp_0"] .input-button{
height: 50px;
max-width: 45px;
margin-right: .88px!important;
border-radius: 0px!important;
}

/*Number Font*/

[data-block="Nkppecwnp_0"] .input-button-label{ 
margin-left: -7.2px!important;
font-weight: bold!important;
}

/*Adding white on hover*/

[data-block="Nkppecwnp_0"] .input-button:hover{
height:55px;
margin-top: -5px;
background-color:white;
border-color: white;
color: black;
}

We'll need to add the CSS above, but using the block identifier for our specific buttons block.

Here's how you can find it.

How did we do?

Question: Scale block

Contact