css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

CSS only animated checkbox toggle on/off switch


  1. SK @SebboDeluxe on

    Damn. This is cool.

  2. This is real cool!

  3. Very cool and straight forward design :)

  4. Every day somebody has a 'meh' toggle switch pen that gets picked, but this simple and sleek animation is probably the first CSS-only switch I've seen since I joined this site that I would actually use. Very cool.

  5. I was curious why you needed JS to change the background, so I started looking into it. I found out the effect can be achieved with CSS only https://codepen.io/zoreet/pen/NBBrVq

  6. I was able to remove the JS completely! ... https://codepen.io/quinlo/pen/NBLqBM

    Awesome toggle!!

  7. @quinlo @zoreet Nice! Honestly wasn't too concerned with the background color because it was just an extra for demo purposes on Codepen. ;)

  8. @agoodwin for sure! Keep up the great work :)

  9. Very nice work! Though I instinctively tried to click "ON" and "OFF" labels and expected those to work.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.