El botón transparente se puede crear fácilmente usando HTML y CSS. En este artículo, usaremos background-color: transparente; 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 del botón .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Create a Transparent button using HTML and CSS </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 un aspecto 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>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA