← Voltar

Botão de Compartilhamento

Agora com 14 estilos realmente diferentes. Cada card abaixo já traz a tag completa (CSS + JS + container) para copiar e colar.

Compatibilidade total com embed antigo

Se você já usava esse snippet, continua funcionando sem nenhuma mudança:

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container"></div>

14 estilos + 14 chamadas

1. Classic

Compartilhar Link

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="classic" data-curtin-label="Compartilhar Link"></div>

2. Glass

Enviar para alguém

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="glass" data-curtin-label="Enviar para alguém"></div>

3. Flat

Divulgar conteúdo

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="flat" data-curtin-label="Divulgar conteúdo"></div>

4. Brutal

Jogar no feed

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="brutal" data-curtin-label="Jogar no feed"></div>

5. Neon

Espalhar esse link

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="neon" data-curtin-label="Espalhar esse link"></div>

6. Ghost

Copiar e compartilhar

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="ghost" data-curtin-label="Copiar e compartilhar"></div>

7. Soft

Recomendar página

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="soft" data-curtin-label="Recomendar página"></div>

8. Icon Only

Apenas ícone de compartilhar

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="icon" data-curtin-label="Compartilhar" data-curtin-icon-only="true"></div>

9. Icon Square

Ícone quadrado

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="icon_square" data-curtin-label="Compartilhar"></div>

10. Icon Transparent

Ícone com fundo transparente

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="icon_clear" data-curtin-label="Compartilhar"></div>

11. Duo Light

Ícone + texto claro

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="duo_light" data-curtin-label="Compartilhar Agora"></div>

12. Duo Dark

Ícone + texto escuro

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="duo_dark" data-curtin-label="Enviar Link"></div>

13. Duo Light Right

Texto + ícone à direita (claro)

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="duo_light_right" data-curtin-label="Compartilhar Agora"></div>

14. Duo Dark Right

Texto + ícone à direita (escuro)

<link rel="stylesheet" href="https://curtin.com.br/static/css/share-button.css?v=20260221-2">
<script src="https://curtin.com.br/static/js/share-button.js?v=20260221-2" defer></script>

<div class="curtin-share-container" data-curtin-style="duo_dark_right" data-curtin-label="Enviar Link"></div>

Observações