GOOD

Vote Button

On post detail pages

  1. 
<form action="" method="post" class="vote">
  <p><button type="submit" title="Promote this">It’s GOOD</button></p>
</form>
    A simple button is presented if the user has not voted.

  2. 
<form action="" method="post" class="vote loading">
  <p><button type="submit" title="Promote this">It’s GOOD</button></p>
</form>
    When pressed, it records a vote.
  3. It’s GOOD

    
<form action="" method="post" class="voted">
  <h6>It’s GOOD</h6>
  <p>
    <button type="submit" name="undo" value="1">Undo</button>
  </p>
</form>
    The button acts like a drop-down, once the user has voted.
  4. It’s GOOD

    
<form action="" method="post" class="voted loading">
  <h6>It’s GOOD</h6>
  <p>
    <button type="submit" name="undo" value="1">Undo</button>
  </p>
</form>
    When undo is pressed, it removes the vote.

In lists of activities

  1. 
<div class="meta">
  <form action="" method="post" class="vote">
    <p>
      <button type="submit" title="Promote this">
        It’s GOOD
      </button>
    </p>
  </form>
</div>
    The button looks different if it’s inside an activity element.

  2. 
<div class="meta">
  <form action="" method="post" class="vote loading">
    <p>
      <button type="submit" title="Promote this">
        It’s GOOD
      </button>
    </p>
  </form>
</div>
    When pressed, it records a vote.
  3. It’s GOOD 1 

    
<div class="meta">
  <form action="" method="post" class="voted">
    <h6>
      It’s GOOD <abbr title="1 person thinks this is good">1</abbr>
    </h6>
    <p>
      <button type="submit" name="undo" value="1">Undo</button>
    </p>
  </form>
</div>
    The button shows a count after the user has voted.
  4. It’s GOOD 1 

    
<div class="meta">
  <form action="" method="post" class="voted loading">
    <h6>
      It’s GOOD <abbr title="1 person thinks this is good">1</abbr>
    </h6>
    <p>
      <button type="submit" name="undo" value="1">Undo</button>
    </p>
  </form>
</div>
    When undo is pressed, it removes the vote.

Multiple voters

  1. 
<div class="meta">
  <form action="" method="post" class="vote">
    <p>
      <button type="submit" title="Promote this">
        It’s GOOD <abbr title="24 people think this is good">24</abbr>
      </button>
    </p>
  </form>
</div>
    If other users have voted, the button includes a count.
  2. It’s GOOD 25 

    
<div class="meta">
  <form action="" method="post" class="voted">
    <h6>
      It’s GOOD <abbr title="25 people think this is good">25</abbr>
    </h6>
    <p>
      <button type="submit" name="undo" value="1">Undo</button>
    </p>
  </form>
</div>
    If the user votes, the count is increased.

Examples

Activity