Buttons

Button

Border bottom

<button class="bg-teal p-2 border-b-4 border-teal-darker rounded text-white hover:border-teal-lighter hover:bg-teal-light">Open file</button>

Raised

  <button class="flex items-center shadow bg-teal px-4 py-2 text-white hover:bg-teal-light">
    Messages
  </button>

Flat

 <button class="px-4 py-2 font-bold text-blue hover:bg-blue-lightest">
	Messages
 </button>

Icon

<button class="flex items-center shadow bg-blue px-4 py-2 text-white hover:bg-blue-light">
    <i class="material-icons mr-2">message</i> Messages
</button>

Icon & notification badge

 <button class="flex items-center relative shadow bg-teal pt-2 pb-2 pl-4 pr-4 text-white hover:bg-teal-light">
  <i class="material-icons mr-2">message</i> Messages
  <span class="absolute pin-r pin-t -mt-2 -mr-2 rounded-full bg-red p-1 text-xs shadow">12</span>
 </button>

Border

<button class="rounded font-medium border border-grey px-4 py-2 hover:bg-grey-lighter">
    Messages
</button>

Line down

<button class="px-4 py-2 border-b-2 border-blue-lightest font-bold text-blue hover:border-blue">
    Messages
</button>