CSS3 styled buttons with compass

These input tags were styled entirely with css.


Just because. Consider this piece of code as leisure programming.

What is the problem with images?

Well, metainformation can be tracked in a very efficient way with a version control system, it can be generated programatically, your html code is cleaner and you don't have to send another asset to your clients.

CSS can be generated with compass making the source code much more manageable and you can even create animations and effects that were once only doable with Flash.


The code may look huge because I had to do some tricks to get it working, like hiding the browser's original input images and replacing them with pseudo-elements and styling them to make them look like checkboxes and radio buttons. The select tag cannot be styled very well just with css because of how the browser displays it and because if you try to hide the original, then you can't see the selected option.

The interesting part of the code is when I create the before and after pseudo-elements and style them to create the buttons. If you use the code remember to follow the structure of the html (input next to span, both inside the label).

If you want to add more themes, you can do so by creating a new button style with the mixin and change each input type style as you need like this ones:

{% for color in page.colors %} {% endfor %}

{% gist 4582253 %}

– Juan German Castañeda Echevarría