Gerador de botões

Modelos prontos

Texto e link

Cores

Formato

Código

<style>
.btn-centralise {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 13px 22px;
  border: 0;
  border-radius: 8px;
  background: #25D366;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
}
.btn-centralise:hover {
  background: #21ba5a;
}
.btn-centralise:active {
  transform: translateY(1px);
}
.btn-centralise:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
</style>

<a class="btn-centralise" href="https://wa.me/5511999999999" target="_blank" rel="noopener noreferrer">
  <svg width="19" height="19" aria-hidden="true" class="lucide lucide-house" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
  <span>Fale conosco pelo WhatsApp</span>
</a>