Botão "Subir ao Topo"

Altere a cor global do site: #4a6fa5

Este botão aparece quando você rola a página para baixo e usa a cor global definida no CSS. Role a página para ver o efeito e clique no botão para voltar ao topo.

Como usar

Para implementar em seu site, basta copiar o código CSS abaixo e adicionar ao seu arquivo de estilos. Em seguida, adicione o HTML do botão no final do corpo da sua página.

O botão usa a variável CSS --cor-global que você pode definir no início do seu CSS para corresponder à cor principal do seu site.

Conteúdo de Exemplo

Role para baixo para ver o botão aparecer...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl. Sed euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl.

Nullam euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl. Sed euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl.

Phasellus euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl. Sed euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl.

Curabitur euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl. Sed euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl.

Vestibulum euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl. Sed euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl.

Donec euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl. Sed euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl.

Integer euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl. Sed euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl.

Suspendisse euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl. Sed euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl.

Morbi euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl. Sed euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl.

Fusce euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl. Sed euismod, nisl vel ultricies lacinia, nisl nisl aliquam nisl, eget ultricies nisl nisl eu nisl.

Código CSS

Copie este código CSS para implementar o botão no seu site:

/* Define a cor global do seu site */
:root {
    --cor-global: #4a6fa5; /* Altere para a cor principal do seu site */
    --cor-global-hover: #385d8a; /* Cor mais escura para hover */
}

/* Botão Subir ao Topo */
.topo-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--cor-global);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.topo-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.topo-btn:hover {
    background-color: var(--cor-global-hover);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.topo-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}