Botões

Botão Simples

Utilize para ações em formulários, diálogos e outras áreas, com suporte para diferentes tamanhos, estados e mais. Confira o código para detalhes sobre como usar.

Codigo HTML + Tailwind CSS:

                    
<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-slate-150 tw-font-medium tw-text-slate-800 hover:bg-slate-500 hover:tw-text-white">
  Default
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-purple-700 tw-font-medium tw-text-white hover:tw-bg-purple-900">
  Novo registro
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-orange-600 tw-font-medium tw-text-white hover:tw-bg-orange-700">
  Secundário
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-sky-500 tw-font-medium tw-text-white hover:tw-bg-sky-700">
  Info
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-emerald-500 tw-font-medium tw-text-white hover:tw-bg-emerald-700">
  Salvar
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-amber-500 tw-font-medium tw-text-white hover:tw-bg-amber-600">
  Atenção
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-red-600 tw-font-medium tw-text-white hover:tw-bg-rose-700">
  Cancelar
</button>

Botão Com destaque sombra

Utilizar os botões com sombra no topo, para ter mais destaque e a ação ser mais intuitiva.

Codigo HTML + Tailwind CSS:

                    
<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-slate-150 tw-font-medium tw-text-slate-800 tw-shadow tw-shadow-lg tw-shadow-stone-950/20 hover:tw-bg-slate-500 hover:tw-text-white hover:tw-shadow-lg hover:tw-shadow-stone-950/40">
  Default
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-purple-700 tw-font-medium tw-text-white hover:tw-bg-purple-900 tw-shadow-lg tw-shadow-purple-700/60 hover:tw-shadow-purple-700">
  Novo registro
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-orange-600 tw-font-medium tw-text-white hover:tw-bg-orange-700 tw-shadow-lg tw-shadow-orange-500 hover:tw-bg-orange-700">
  Secundário
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-sky-500 tw-font-medium tw-text-white hover:tw-bg-sky-700 tw-shadow-lg tw-shadow-sky-500 hover:tw-bg-sky-700">
  Info
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-emerald-500 tw-font-medium tw-text-white hover:tw-bg-emerald-700 tw-shadow-lg tw-shadow-emerald-500 hover:tw-bg-emerald-700">
  Salvar
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-amber-500 tw-font-medium tw-text-white hover:tw-bg-amber-600 tw-shadow-lg tw-shadow-amber-500 hover:tw-bg-amber-700">
  Atenção
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-bg-red-600 tw-font-medium tw-text-white hover:tw-bg-rose-700 tw-shadow-lg tw-shadow-red-500 hover:tw-bg-red-700">
  Cancelar
</button>

Botão Com somente borda

Utilizar os botões com sombra no topo, para ter mais destaque e a ação ser mais intuitiva.

Codigo HTML + Tailwind CSS:

                    
<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-border tw-border-slate-500 tw-font-medium tw-text-slate-500 hover:tw-text-white hover:yw-bg-slate-500">
  Default
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-border tw-border-purple-700 tw-text-purple-700 hover:tw-bg-purple-700 tw-font-medium hover:tw-text-white">
  Novo registro
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-border tw-bg-white tw-text-orange-600 tw-border-orange-600 tw-font-medium hover:tw-text-white hover:tw-bg-orange-600">
  Secundário
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-border tw-border-sky-500 tw-text-sky-500 tw-font-medium hover:tw-text-white hover:tw-bg-sky-500">
  Info
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-text-emerald-500 tw-border tw-border-emerald-500 tw-font-medium hover:tw-text-white hover:tw-bg-emerald-500">
  Salvar
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-text-amber-500 tw-bg-white tw-border tw-border-amber-500 tw-font-medium hover:tw-text-white hover:tw-bg-amber-500">
  Atenção
</button>

<button class="tw-flex tw-items-center tw-rounded-lg tw-justify-center tw-px-6 tw-py-2 tw-text-red-600 tw-border tw-border-red-600 tw-font-medium hover:tw-text-white hover:tw-bg-rose-600">
  Cancelar
</button>

Crie uma categoria

Atenção

Gestão de Agendas

Olá Marina! bacana ter você aqui. 👋

Botões

Botão Simples

Botão Com destaque sombra

Botão Com somente borda

Gestão de Categoria Nova

Crie uma categoria

Atenção

Gestão de Agendas

Olá Marina! bacana ter você aqui. 👋

Botões

Botão Simples

Botão Com destaque sombra

Botão Com somente borda

Gestão de Categoria