Criando botões fantasmas com CSS

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 #1b1f25um 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 e background – O color A propriedade está definida como #ffffffque resulta em texto em branco. O background 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 e font-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.