Buttons

<div class="p-12">

  <button type="button"
          class="block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
  </button>

  <button type="button"
          class="block mt-6 border border-blue-500 hover:border-blue-700 text-blue-500 hover:text-blue-700 font-bold py-2 px-4 rounded">
    Button Outline
  </button>

  <button type="button"
          class="block mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4">
    Button
  </button>

  <button type="button"
          class="block mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full">
    {{ button.text }}
  </button>

  <button type="button"
          class="mt-6 block transition duration-300 ease-in-out focus:outline-none focus:shadow-outline bg-purple-700 hover:bg-purple-900 text-white font-normal py-2 px-4 mr-1 rounded">
    Button with Transition Effect
  </button>
  <button type="button"
          class="mt-6 block btn-outline-primary transition duration-300 ease-in-out focus:outline-none focus:shadow-outline border border-purple-700 hover:bg-purple-700 text-purple-700 hover:text-white font-normal py-2 px-4 rounded">
    Button Outline with Transition Effect
  </button>


</div>