Accentable Pill Check/Radio Buttons

José Pablo Ramírez Vargas - Sep 18 '22 - - Dev Community

I needed some neat way to advertise that certain filtering buttons would yield data in a particular state. The requirement was that all possible filters needed to be displayed all the time, and that the presence of this particular data state needed to be immediately visible.

This is what I came up with:
Accentable Pill Buttons

The various states, in order, are:

  1. Normal
  2. Accented.
  3. Selected.
  4. Selected accented.
  5. Disabled.

If you would like to use them, I created a quick Gist demonstrating these (and of course the necessary CSS is there).

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player