Skip to content
A Toggle Add/Remove and Remove/Add buttons for the web
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


This is a simple combination of css rules for adding a toggleable button that represents add and remove without the need of JavaScript. Since this is all Though I have not done much extensive testing, all of the features should work in IE9+ and vendor prefixes are added for Safari and IE support.

To use make a checkbox plus label combo and then add the class you want to use

<input type="checkbox" class="add-remove" id="add"/>
<label for="add"></label>

Don't forget to use an id in the input and match it with the for attribute in the label

###Remove-Add vs Add-Remove

I have included 2 separate classes for styling checkboxes because I wanted to allow for easy handling of making the default to either be add or remove instead of requiring that the inputs be checked in order to get the desired result. If you only want one, then you can simply and safely delete all the rules that begin as input.add-remove or input.remove-add.

###Further Styling The elements themselves scale very well based on the width and height in the label and changing colors is very easy as well.

<<<<<<< HEAD An example and overview can be found here:

Inspired by cdflynn's Android crossview

An example and overview can be found here:


You can’t perform that action at this time.