En este artículo vamos a ver cómo crear botones de texto usando CSS.
El botón de texto es un botón que parece ser texto pero actúa como un botón si lo presionamos. Los botones de texto son diferentes de las etiquetas de anclaje, incluso si se parecen. Para crear botones de texto primero, creamos botones simples en HTML usando una etiqueta de botón. Después de crear el botón, aplicamos CSS y cambiamos sus propiedades para que parezca un botón de texto. Para que parezca un botón de texto, eliminamos su borde y fondo predeterminados. Para identificar que es un botón le damos color a hover para que, cuando pasemos el cursor sobre él, cambie su color de transparente a verde.
Sintaxis:
#textButton{
background:none;
border:none;
}
#textButton:hover{
background-color: green;
}
Ejemplo: Lo siguiente demuestra el enfoque anterior. Creamos un archivo HTML y creamos un botón con el nombre «GeeksforGeeks» usando una etiqueta de botón con id como «textButton». Después de eso, creamos una etiqueta de estilo en la que seleccionamos ese botón usando su id y eliminamos sus propiedades de fondo y borde configurándolos en ninguno. Agregamos un color de fondo flotante para que los usuarios puedan identificar nuestro botón.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Welcome To GFG</h2>
<h1>Text buttons using css</h1>
<!-- creating buttons -->
<button id="textButton">
GeeksforGeeks
</button>
<!-- Applying styling to buttons -->
<style>
#textButton{
background:none;
border:none;
}
#textButton:hover{
background-color: green;
}
</style>
</body>
</html>
Producción:
botones de texto usando CSS
Publicación traducida automáticamente
Artículo escrito por devangj9689 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA