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