BEM Demo

by Poonam Baveja

HTML

<button type="submit" class="button">
	Primary Button
</button>
<button type="submit" class="button button---danger-state">
	Danger button
</button>
<button type="submit" class="button button--success-state">
	Success button
</button>

CSS

.button {
      background-image: linear-gradient(#EEE, #DDD);
      display: inline-block;
      border-radius: 2px;
      border: 1px solid #D5D5D5;
      padding: 10px 18px;
      font: 500 14px/18px Verdana, sans-serif;
  }
  .button--success-state {
      background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
      color: #FFF;
      border-color: #4A993E;
  }
  .button---danger-state {
      color: #FFF;
      background:#d43f3a;
      border-color: #D8000C;
  }