rate.js

<rate>
  <div class={"thumbs-wrapper " + (rating > 0 ? 'up' : rating < 0 ? 'down' : '')}>
    <button class="down icon-thumbs-down"></button>
    <button class="up icon-thumbs-up"></button>
  </div>

  <style scoped>
    button{
      min-width: auto;
      min-height: auto;
      padding: 4px;
      background: none;
      transition: all 0.2s;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      color: #a5bed0;
      position: relative;
    }
    button.up{
      top: -4px;
    }
    button:hover{
      background: none;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    }
    .thumbs-wrapper.up button.up{
      color: green;
    }
    .thumbs-wrapper.down button.down{
      color: red;
    }
    .thumbs-wrapper.down button.down:before{
      content: "\e90c" !important; /* filled */
    }
    .thumbs-wrapper.up button.up:before{
      content: "\e90e" !important; /* filled */
    }
  </style>

  this.rating = 0;
  this.on('mount', function(){
    this.update({
      rating: 1,
    })
  });
</rate>