Equivalent of like buttons with counters using HTML5/CSS3 (and not javascript?)

Question

I would like to put a "vote" button on a webpage with a counter. The vote buttons come with a counter of current votes. If it is not clicked, the count displayed is the current number of votes. When clicked, the current number of votes is incremented of one (and the button change its state or appeareance).

Is there a way to do this in pure HTML5/CSS3?

Answer 1

The button and it's interaction can be done on the user-side with pure CSS given you generate a small style tag in your document server-side. Needless to say that you can't record the result in your database if you don't use Javascript or a post back, though.

 #container { width: 100px; height: 20px; position: relative; text-align: center; } #like { position: absolute; display: block; width: 100%; height: 100%; opacity: 0; cursor: pointer; } #like:checked { counter-increment: likes; } #button { display: block; width: 100%; height: 100%; background: green; } #like:checked ~ #button { background: blue; } #count:before { content: counter(likes); } 

 <!-- Create this style tag server-side --> <style> body { counter-reset: likes 7; /* Initial number of likes */ } </style> <div id="container"> <input id="like" type="checkbox" name="like" value="like" /> <span id="button">Like <span id="count"></span></span> </div>