๐ŸงฟHow to style a rounded bullet-like checkbox for options buttons

This tutorial takes you step by step on how to create rounded checkboxes for options buttons with styling similar to the one shown in the following image:

Select the checkbox element for styling:

  1. In the โ€œEditโ€ sub-menu open the โ€œDesignerโ€ card.

  2. Select the Options buttons component you want to style.

  3. Click "+ Sub-Elements".

  4. Change the โ€œElementโ€ you want to style from โ€œwhole thingโ€ to โ€œCheckboxโ€.

Add styles to the checkbox:

  1. In the โ€œBorderโ€ tab:

    a. Give a value to the border property e.g. 1px solid black

    b. Set a border radius e.g. 25px

  2. In the โ€œSizeโ€ tab, give the checkbox a matching width and height e.g. 25px

Create and style the inner circle:

  1. In the โ€œFontโ€ tab (the tick is styled as a font), set the font-size to 0px or color: transparent to make it not visible.

  2. Click โ€œ+ Filterโ€ to be able to filter by selected state styling. Change the "When" option to โ€œSelectedโ€ to style the checkbox selected state.

  3. In the โ€œBackgroundโ€ tab, give the checkbox a background color.

  4. In the โ€œBorderโ€ tab, set an inner box shadow to separate the background color from the checkbox border e.g. inset 0px 0px 0px 3.5px #fff

Thatโ€™s it! You can now play with styling to get it exactly as you want it to be!.

Last updated