Botão “Entrar com BTS”

Versões

Escolha a versão que mais se destaca do fundo da sua tela: as duas funcionam em fundo claro e em fundo escuro. “Continuar com BTS” serve para telas de cadastro. O ícone sozinho é para espaços pequenos, ao lado de outros botões de login.

No seu site (HTML + CSS)

É um link comum com estilo: não precisa carregar nenhum script da BTS, então funciona com qualquer política de segurança de conteúdo (CSP). O href aponta para a rota do seu servidor que inicia o login (ela monta o endereço do https://login.bellga.tech/connect/authorize com PKCE). Arquivos: botao-bts.html e botao-bts.css.

<!-- Botão "Entrar com BTS" (versão escura). Troque bts-escuro por bts-claro para a versão clara
     e o texto por "Continuar com BTS" se preferir. O href é a rota do SEU site que inicia o login. -->
<a class="bts-botao bts-escuro" href="/entrar/bts">
  <span class="bts-icone"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.6-3 8.4-7 10-4-1.6-7-5.4-7-10V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg></span>
  <span>Entrar com BTS</span>
</a>

<!-- Só o ícone -->
<a class="bts-botao bts-so-icone bts-escuro" href="/entrar/bts" aria-label="Entrar com BTS">
  <span class="bts-icone"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.6-3 8.4-7 10-4-1.6-7-5.4-7-10V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg></span>
</a>

/* Botão "Entrar com BTS" — https://bellga.tech/marca.html
   Copie este CSS para o seu site. Não mude as cores, o texto nem as proporções. */
.bts-botao{display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;height:40px;padding:0 16px 0 10px;
  border:1px solid transparent;border-radius:8px;font:500 15px/1 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bts-botao:focus-visible{outline:2px solid #0f5c55;outline-offset:2px}
.bts-icone{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:5.5px}
.bts-icone svg{width:14.5px;height:14.5px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bts-escuro{background:#0f5c55;color:#fff}
.bts-escuro:hover{background:#0c4b45}
.bts-escuro .bts-icone{background:#fff}
.bts-escuro .bts-icone svg{stroke:#0f5c55}
.bts-claro{background:#fff;color:#14201f;border-color:#c3cbc6}
.bts-claro:hover{background:#f3f5f2}
.bts-claro .bts-icone{background:#0f5c55}
.bts-claro .bts-icone svg{stroke:#fff}
/* Só o ícone (40 × 40): use com aria-label="Entrar com BTS" */
.bts-so-icone{width:40px;padding:0;justify-content:center}
.bts-so-icone.bts-escuro .bts-icone{width:40px;height:40px;background:none}
.bts-so-icone.bts-escuro .bts-icone svg{width:26.4px;height:26.4px;stroke:#fff}

Imagens (SVG)

Para apps ou lugares onde não dá para usar HTML. O texto já está convertido em curvas (fonte Inter), então a aparência é a mesma em qualquer aparelho.

Entrar com BTS — escuroentrar-escuro.svg Entrar com BTS — claroentrar-claro.svg Continuar com BTS — escurocontinuar-escuro.svg Continuar com BTS — clarocontinuar-claro.svg Só o ícone — escuroicone-escuro.svg Só o ícone — claroicone-claro.svg Marca BTS (64 × 64)bts.svg

Regras de uso

• Use só os textos “Entrar com BTS” ou “Continuar com BTS”, sem traduzir nem abreviar.
• Não mude cores, fonte, ícone ou proporções. Altura mínima de 40 px (o ícone sozinho: 40 × 40 px).
• Deixe pelo menos 8 px de espaço livre em volta do botão.
• Coloque o botão BTS com o mesmo destaque dos outros botões de login da tela (Google, Apple…), nunca menor.
• O botão só pode levar ao login da BTS (login.bellga.tech). Nunca peça a senha da BTS no seu site ou app.

As regras completas para parceiros (cadastro, dados que podem ser pedidos, preços e responsabilidades) estão em Entrar com BTS para parceiros.