Creación de botones fantasma con CSS

En los últimos años, los botones de fantasmas han solidificado su posición como un elemento moderno y elegante. Caracterizado por su naturaleza transparente y su esquema minimalista, los botones fantasmas, también conocidos como botones “vacíos” o “desnudos”, ofrecen una estética elegante y limpia que puede mejorar la experiencia del usuario. A continuación, exploraremos cómo crear un botón fantasma de este tipo usando CSS.

Consideración de UX para botones fantasmas

Los botones fantasmas generalmente están bordeados por una línea fina y contienen texto sin formato dentro. A menudo se usan como CTA, proporcionan una apariencia ordenada, llamando la atención con alto contraste al tiempo que ofrecen una nueva versión del aspecto “plano”.

Además, se han vuelto populares porque son fáciles de diseñar, ayudar a crear puntos focales sin abrumar al usuario y mejorar la estética al mantener una interfaz de usuario limpia. Además, se integran fácilmente en cualquier diseño debido a su capacidad para combinarse con el entorno.

A pesar de sus beneficios, los botones fantasmas deben usarse sabiamente. La colocación inapropiada puede hacer que se mezclen demasiado con el diseño general, y en los peores escenarios, pueden confundirse con los campos de entrada. Sería mejor si fuera cauteloso al usarlos, especialmente en una imagen de fondo, ya que pueden caer demasiado en el fondo y conducir a problemas de legibilidad del texto.

Ahora que entendemos ciertas implicaciones de UX, creemos una usando HTML y CSS.

Configuración de la estructura para nuestro botón fantasma

El primer paso para crear un botón fantasma con CSS implica configurar la estructura HTML. En esta configuración, estamos usando el <a> elemento para servir como base para nuestro botón fantasma. Así es como se ve:

<a href="https://1stwebdesigner.com/designing-engaging-3d-buttons-css/" class="elegant-ghost-button" target="_blank">Featured</a> 

Estilizar el botón fantasma con CSS

El siguiente paso es definir la apariencia de nuestro botón fantasma. Aquí hay un vistazo al 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, el body El color de fondo está establecido en #1b1f25un tono oscuro que contrastará efectivamente con nuestro botón fantasma.

Entonces nos movemos al .elegant-ghost-button clase para definir el aspecto y el comportamiento de nuestro botón:

• text-align: center – Esta propiedad se utiliza para alinear horizontalmente el texto dentro del botón, ayudando en el equilibrio visual.
• color y background – El color la propiedad está establecida en #ffffffque resulta en texto blanco. El background es el mismo color que el fondo del cuerpo. Esto ayuda a crear el efecto ‘Ghost’, donde el botón parece combinarse con el fondo.
• border: 1px solid #ffffff – Esta propiedad describe el botón con un borde blanco delgado, definiendo aún más el efecto del botón fantasma.
• font-size y font-family -Estas propiedades especifican el tamaño del texto (18px) y la fuente (“Maven Pro”, Sans-Serif) para una etiqueta de botones fácil de leer y atractiva.
• padding: 12px 24px – La propiedad de relleno proporciona espacio alrededor del texto y también define las dimensiones del botón.
• display: inline-block – Esta propiedad asegura que el botón se alinee correctamente con otros elementos en línea.
• text-decoration: none – Esta propiedad se utiliza para eliminar el subrayado predeterminado que generalmente acompaña al texto de anclaje.
• transition – Esta propiedad suaviza el cambio de color durante una duración de 0.3 segundos cuando el botón se desplaza o hace clic. El efecto es atractivo, ya que el color de fondo se vuelve blanco y el color de texto se oscurece #1b1f1f.

Además de las propiedades estáticas del botón, el efecto flotar es crucial para su interactividad. El .elegant-ghost-button:hover, .elegant-ghost-button:active Los selectores se utilizan para cambiar el fondo y el color de texto cuando el usuario interactúa con el botón, proporcionando comentarios claros de que el botón se puede hacer clic.

En un escenario más práctico, estas propiedades y sus valores pueden requerir ajustes para resonar con el tema de diseño de su sitio web y los requisitos funcionales. Por ejemplo, es posible que deba modificar las dimensiones, los colores, las propiedades de fuente y la duración de la transición del botón para alinearse con la estética de su sitio. Para mejorar la capacidad de respuesta en diferentes dispositivos, es posible que deba emplear consultas de medios para ajustar el relleno y el tamaño de la fuente de acuerdo con el tamaño de la ventana de la ventana gráfica. Por último, para los diseños que usan Flexbox o Grid, la administración del tamaño y el posicionamiento del botón deberá considerarse.

El resultado

Vea el botón Pen Ghost CSS #1 por 1stWebDesigner (@FirstWebDesigner) en CodePen.

Pensamientos finales

Los botones fantasmas introducen un diseño minimalista y limpio en las páginas web, lo que los hace particularmente útiles en contextos donde se desea una estética simplista y discreta. Sin embargo, debido a su naturaleza sutil, es posible que no se destaquen tan prominentemente como otros elementos de diseño. Como tal, usarlos como el CTA principal en su página web podría no ser la estrategia más efectiva.

A menudo brillan cuando se usan para acciones secundarias o terciarias, donde su elegancia discreta puede mejorar el diseño general sin atraer atención innecesaria. Por ejemplo, se pueden usar como botones de navegación, botones de envío de formularios o indicaciones de acción secundaria que complementan un CTA primario y más conspicuo.

Recuerde, el diseño exitoso depende de la comprensión y la aplicación de elementos en sus contextos efectivos. Los botones fantasmas, cuando se usan juiciosamente, pueden contribuir a una interfaz visualmente agradable y fácil de usar.