Nos últimos anos, os botões fantasmas solidificaram sua posição como um elemento moderno e elegante. Caracterizado por sua natureza transparente e contorno minimalista, botões fantasmas, também conhecidos como botões “vazios” ou “nus”, oferece uma estética elegante e limpa que pode melhorar a experiência do usuário. Abaixo, exploraremos como criar um botão tão fantasma usando CSS.
Consideração ux para botões fantasmas
Os botões fantasmas geralmente são delimitados por uma linha fina e contêm texto simples. Frequentemente usados como CTAs, eles proporcionam uma aparência elegante, chamando a atenção com alto contraste, oferecendo uma nova visão da aparência “plana”.
Além disso, eles se tornaram populares porque são simples de projetar, ajudar a criar pontos focais sem sobrecarregar o usuário e melhorar a estética, mantendo uma interface do usuário limpa. Além disso, eles se integram facilmente a qualquer design devido à sua capacidade de se misturar ao meio ambiente.
Apesar de seus benefícios, os botões fantasmas devem ser usados com sabedoria. O posicionamento inadequado pode fazer com que eles se misturem demais com o layout geral e, nos pior cenários, eles podem ser confundidos com campos de entrada. Seria melhor se você fosse cauteloso ao usá -los, especialmente em uma imagem de fundo, pois eles podem cair muito longe no fundo e levar a problemas de legibilidade para o texto.
Agora que entendemos certas implicações UX, vamos criar um usando HTML e CSS.
Configurando a estrutura para o nosso botão fantasma
A primeira etapa para criar um botão fantasma com CSS envolve a configuração da estrutura HTML. Nesta configuração, estamos usando o <a>
Elemento para servir como base para o nosso botão fantasma. Aqui está como fica:
<a href="https://1stwebdesigner.com/designing-engaging-3d-buttons-css/" class="elegant-ghost-button" target="_blank">Featured</a>
Estilizando o botão fantasma com CSS
O próximo passo é definir a aparência do nosso botão fantasma. Aqui está uma olhada no código CSS que usaremos:
body { background: #1b1f25; } /* Styling our Ghost Button */ .elegant-ghost-button { text-align: center; /* Centers the button text */ color: #ffffff; /* Sets text color */ background: #1b1f25; /* Matches button background with body background for the 'ghost' effect */ border: 1px solid #ffffff; /* Sets a thin white border around the button */ font-size: 18px; padding: 12px 12px; display: inline-block; /* Enables the button to align better with other elements */ text-decoration: none; /* Removes the default underline of the anchor text */ font-family: "Maven Pro", sans-serif; min-width: 120px; /* Ensures a sufficient clickable area */ transition: background 0.3s ease-in-out, color 0.3s ease-in-out; /* Adds a smooth color transition on hover */ } /* Changes color and background on hover to provide dynamic feedback */ .elegant-ghost-button:hover, .elegant-ghost-button:active { color: #1b1f25; background: #ffffff; }
Inicialmente, o body
A cor de fundo está definida como #1b1f25
um tom escuro que contrasta efetivamente com o nosso botão fantasma.
Então nos mudamos para o .elegant-ghost-button
Classe para definir a aparência e o comportamento do nosso botão:
text-align: center
– Esta propriedade é usada para alinhar horizontalmente o texto dentro do botão, ajudando em equilíbrio visual.color
ebackground
– Ocolor
A propriedade está definida como#ffffff
que resulta em texto em branco. Obackground
tem a mesma cor do fundo do corpo. Isso ajuda a criar o efeito ‘fantasma’, onde o botão parece se misturar com o plano de fundo.border: 1px solid #ffffff
– Esta propriedade descreve o botão com uma borda branca fina, definindo ainda mais o efeito do botão fantasma.font-size
efont-family
-Essas propriedades especificam o tamanho do texto (18px) e a fonte (“Maven Pro”, Sans-Serif) para uma etiqueta de botão fácil de ler e atraente.padding: 12px 24px
– A propriedade de preenchimento fornece espaço ao redor do texto e também define as dimensões do botão.display: inline-block
– Esta propriedade garante que o botão alinhe corretamente com outros elementos embutidos.text-decoration: none
– Esta propriedade é usada para remover o sublinhado padrão que geralmente acompanha o texto da âncora.transition
– Esta propriedade suaviza a mudança de cor em uma duração de 0,3 segundos quando o botão é pairado ou clicado. O efeito é envolvente, pois a cor do fundo fica branca e a cor do texto escurece para#1b1f1f
.
Além das propriedades estáticas do botão, o efeito do pau é crucial para sua interatividade. O .elegant-ghost-button:hover, .elegant-ghost-button:active
Os seletores são usados para alternar o plano de fundo e o texto quando o usuário interage com o botão, fornecendo um feedback claro de que o botão é clicável.
Em um cenário mais prático, essas propriedades e seus valores podem exigir ajustes para ressoar com o tema de design e os requisitos funcionais do seu site. Por exemplo, pode ser necessário modificar as dimensões, cores, propriedades da fonte e duração da transição do botão para se alinhar com a estética do seu site. Para melhorar a capacidade de resposta entre diferentes dispositivos, pode ser necessário empregar consultas de mídia para ajustar o preenchimento e o tamanho da fonte de acordo com o tamanho da viewport. Por fim, para layouts usando Flexbox ou Grid, o gerenciamento do tamanho e do posicionamento do botão precisará ser considerado.
O resultado
Consulte o botão Pen Ghost CSS #1 por 1stwebdesigner (@FirstWebDesigner) no Codepen.
Pensamentos finais
Os botões fantasmas apresentam um design minimalista e limpo nas páginas da web, tornando -as particularmente úteis em contextos em que é desejada uma estética simplista e discreta. No entanto, devido à sua natureza sutil, eles podem não se destacar tão proeminentemente quanto outros elementos de design. Como tal, usá -los como CTA primário em sua página da web pode não ser a estratégia mais eficaz.
Eles costumam brilhar quando usados para ações secundárias ou terciárias, onde sua elegância discreta pode melhorar o design geral sem chamar atenção desnecessária. Por exemplo, eles podem ser usados como botões de navegação, botões de envio de formulários ou ações secundárias solicitam que complementem um CTA primário e mais conspícuo.
Lembre -se, o design bem -sucedido depende da compreensão e aplicação de elementos em seus contextos eficazes. Os botões fantasmas, quando usados criteriosamente, podem contribuir para uma interface visualmente agradável e amigável.
Esta postagem pode conter links de afiliados. Veja nossa divulgação sobre links de afiliados aqui.

Luis es un experto en Comunicação, Redes de Computadores, Marketing de Comércio Eletrônico e Suporte de TI. Con amplia experiencia en tecnología, su objetivo es compartir conocimientos prácticos para ayudar a los lectores a entender y aprovechar estas áreas digitales clave.