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{
margin-top: -5px;
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?

Trigger a Global Keyword with JS (web v3)

How to set up questions with a countdown