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