Upvote - downvote module

Github Page

The aim of this demo is to show:

• How to style radio-buttons to exactly suit your needs.
• How to use CSS to target elements that have been checked, as well as checked and hover/focus.

Examples

Example 1: Unstyled

• Upvote
• Downvote

Example 2: Unchecked by default

• Upvote
• Downvote

Example 3: Checked by default

• Upvote
• Downvote

Example 4: Disabled

• Upvote
• Downvote

Code

<ul class="vote">
  <li class="vote__item">
    <input class="vote__control" type="radio" name="vote1" id="upvote1">
    <label class="vote__label vote__label--upvote" for="upvote1">
      <span class="vote__content">Upvote</span>
    </label>
  </li>
  <li class="vote__item">
    <input class="vote__control" type="radio" name="vote1" id="downvote1">
    <label class="vote__label vote__label--downvote" for="downvote1">
      <span class="vote__content">Downvote</span>
    </label>
  </li>
</ul>

Github Page