SnippetUI
← Back to snippets

Botão Shimmer

Um lindo componente de botão que emite uma faixa de luz (efeito de brilho) ao passar o mouse e periodicamente.

HTMLCSSTailwind CSSReact

É um belo componente de botão que atrai o olhar com uma faixa de luz (efeito de brilho) que flui ao pairar e periodicamente. Ideal para CTA (Call To Action) onde você deseja chamar a atenção do usuário.

Visualização

Casos de uso e recursos

  • Melhore as taxas de conversão: o movimento visual torna mais fácil chamar a atenção dos usuários, tornando-o perfeito para frases de chamariz (CTA) importantes, como botões de inscrição e compra.

  • Animação Pequena: Dá uma impressão sofisticada com um efeito de brilho periódico regular (reflexo de luz) que não é muito chamativo.

  • Microinterações: O botão será ligeiramente levantado ao passar o mouse e uma sombra será adicionada para enfatizar que é um elemento clicável.

Pontos-chave de design e UX (Design & UX)

  • Contraste e Visibilidade: O efeito é enfatizado pela execução de faixas brilhantes de luz contra um fundo escuro.

  • Desempenho: Animação que utiliza transform e opacity minimiza a carga de desenho no navegador e proporciona movimentos suaves.

  • Acessibilidade: O anel de foco (focus:ring) foi configurado adequadamente para que o status possa ser comunicado visualmente mesmo com operações do teclado.

Como personalizar (Guia de Personalização)

  • Alterar cor: Você pode personalizar a cor da luz alterando rgba(255, 255, 255, 0.2) para a cor da sua marca (por exemplo, rgba(59, 130, 246, 0.3)).

  • Ajuste de velocidade de animação: Definir 3s de animation: shimmer-effect 3s infinite; para 2s fará com que ele se mova mais rápido, e definir 5s fará com que ele se mova mais devagar.

  • Implementação apenas com Tailwind: Ao adicionar keyframes a tailwind.config.js, é possível completar a implementação apenas com classes utilitárias do Tailwind sem usar classes customizadas.

Código de implementação (Implementação)

HTML & CSS (Tailwind CSS併用)

<button class="shimmer-btn text-slate-200 bg-slate-900 border border-slate-700/50 px-8 py-3 rounded-full font-medium transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-500/20 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-950">

<span class="relative z-10 flex items-center gap-2">

  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />

  </svg>

  Get Started

</span>

</button>



<style>
.shimmer-btn {

  position: relative;

  overflow: hidden;

}



.shimmer-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 50%;

  height: 100%;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(255, 255, 255, 0.2),

    transparent

  );

  transform: skewX(-20deg);

  animation: shimmer 3s infinite;

}



@keyframes shimmer {

  0% { left: -100%; }

  20% { left: 200%; }

  100% { left: 200%; }

}
</style>

React (configuração do Tailwind)

Esta é uma abordagem que pode ser concluída em um componente React estendendo o arquivo de configuração do Tailwind (tailwind.config.js).