Rétor dice: Has conocido en los apartados anteriores posibles entornos para desarrollar páginas web. Has conocido también que el lenguaje en el que se realiza esto es el HTML, cuyos comandos están formados por etiquetas y atributos. Sin embargo, en este apartado conocerás que ir elemento por elemento especificando el color y muchas otras características como tipo de letra, tamaños, etc. no es óptimo en un diseño de una web: resulta ineficiente por ser muy redundante al repetir muchas veces la misma acción. Imagínate, por ejemplo, tener que aplicar el mismo color cientos de veces a cada párrafo, desesperante, ¿no?

Conocerás entonces en este apartado, y utilizarás, la solución que se ha implementado para evitar este problema: los estilos CSS. Así, los apartados de este nuevo punto son:

4.1. Etiquetas HTML: el origen del clonado

Además, para familiarizarte con HTML y CSS te presentamos en esta introducción una aplicación muy conocida que ha permitido el uso de los estilos CSS: el botón fantasma.

1. ¿Qué es un botón fantasma?

Un botón fantasma tiene el fondo transparente para que se vea lo que hay debajo, quedan muy acertados en un diseño con el borde y el texto en blanco sobre fotografías oscuras o con color en fotografías iluminadas. Para que el fondo sea transparente se usa una propiedad denominada background-color: transparent;

Lee el artículo a continuación y ¡comprueba que es muy fácil!

Lee cómo se crea

El botón transparente se puede crear fácilmente utilizando HTML y CSS. En este artículo, usaremos background-color: transparent; propiedad para diseñar el botón de fondo transparente.

Código HTML: En esta sección, crearemos una estructura básica de botón usando la etiqueta de botón.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <title></title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>
        Create a Transparent button
        using HTML and CSS
    </h3>
    <button class="btn">Click me!</button>
</body>
  
</html>

Código CSS: En esta sección, diseñaremos el botón usando la propiedad CSS. Usaremos el color de fondo: transparente; propiedad para configurar el botón con apariencia transparente.

 <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        /* Styling the button */
        .btn {
            cursor: pointer;
            border: 1px solid #3498db;
            background-color: transparent;
            height: 50px;
            width: 200px;
            color: #3498db;
            font-size: 1.5em;
            box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
        }
    </style>

Código completo: en esta sección, combinaremos las dos secciones anteriores para crear un botón de fondo transparente.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <title></title>
  
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        /* Styling the button */
        .btn {
            cursor: pointer;
            border: 1px solid #3498db;
            background-color: transparent;
            height: 50px;
            width: 200px;
            color: #3498db;
            font-size: 1.5em;
            box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>
        Create a Transparent button
        using HTML and CSS
    </h3>
    <button class="btn">Click me!</button>
</body>
 
</html>

¡Prueba el resutado final en tu ordenador!

Artículo by lakshgoel204 and translated by Acervo Lima

From How to Create a Transparent button using HTML and CSS?. License: CCBY-SA

Kardia dice ¿Más detalles?

Si deseas ampliar la información de esta aplicación, aquí tienes un vídeo que te explica cada etiqueta utilizada y cada opción, ¡Anímate a probarlo en tu ordenador!:

Puedes descargar la descripción del video en formato texto haciendo clic aquí.