Código para Copiar Texto ao Clicar e Mostrar Mensagem Personalizada com HTML, CSS, JS

<p class="copyText" href="https://www.exemplo.com">Clique aqui para copiar o link</p>

<div id="notification" class="notification"></div>

<style>
.notification {
    display: none;
    position: fixed;
    bottom: 40px; 
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
</style>

<script>
    function mensagemRetorno(mensagem) {
        var notification = document.getElementById('notification');
        notification.innerText = mensagem;
        notification.style.display = 'block';
        
        setTimeout(function() {
            notification.style.display = 'none';
        }, 5000);
    };

    // Selecionar todos os elementos com a classe 'copyText'
    const elements = document.querySelectorAll('.copyText');

    // Adicionar evento de clique para cada elemento
    elements.forEach(element => {
        element.addEventListener('click', function(event) {
            // Prevenir o comportamento padrão do clique
            event.preventDefault();

            // Obtém o valor do atributo 'href' do elemento clicado
            const textoParaCopiar = element.getAttribute('href');

            if (textoParaCopiar) {
                navigator.clipboard.writeText(textoParaCopiar).then(() => {
                    mensagemRetorno("Texto copiado com sucesso!");
                }).catch(err => {
                    mensagemRetorno("Falha ao copiar o texto. Por favor, copie manualmente.");
                });
            } else {
                mensagemRetorno("Nenhum texto disponível para copiar.");
            }
        });
    });
</script>