x
Posted in

Criando botões fantasmas com CSS

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.

Criando botões fantasmas com 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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *