CSS toggle buttons

Thornmaker has improved my CSS logic script which is much neater and requires less styles, good work 🙂 Sirdarckcat has also created multiplication which is amazing stuff, so I had a bit of spare time and I decided to see if it was possible to create toggles in CSS with a visual appearance of a button instead of using plain checkboxes. Turns out you can 🙂 with a little opacity trick. Firefox still interacts with form objects even if they are invisible. It may be possible to take this further and manipulate HTML by hiding and showing code.

CSS Toggle buttons


I’ve added a HTML example, it’s possible to change the content of the text within the tags as well but for now this demo makes the text bold by showing and hiding tags.

CSS HTML trick

6 Responses to “CSS toggle buttons”

  1. 排 尾 DaCat writes:

    Hi gareth

    The checkbox toggle stuff is how the “Pop up” section on CSK2 (www.sirdarckcat.net/csk2.html) works.

    Any way, thornmaker and I are thinking on a way of doing Pascal Triangle, and/or Fibonacci Numbers, via CSS calculation.

    Anyway, CSS3 has a bag full of tricks, have you seen the calc() function? I think it’s static, but is worth a look.


  2. Gareth Heyes writes:

    Ah ok sorry I didn’t realise.

    I’m trying to get loops to work but it’s proving difficult because there’s no way for CSS to introduce state. If is was possible to check a checkbox within CSS then it would be. 🙁

  3. auron writes:

    To build a working loop, two things are needed: an if statement, and a goto .
    If the choosen statement is the “:checked” condition, then the “goto” should be able to manipulate ( check and uncheck) checkbox.
    If this is not possible, the only solution is to change the “if ” to something else…

    PS: this is a really inspiring worg, thanks 🙂

  4. Master Ternary Li writes:

    loops can also be provided without a goto statement by using recursion.

  5. Daren writes:

    Have you come across css toggling using a form selector at all? so you just click on the selector and then choose which stylesheet you wanna use? perhaps choose between three? any ideas?

  6. mippy writes:

    A goto statement, what the hell is this qbasic?