Blaze CSS es un kit de herramientas de interfaz de usuario de código abierto sin marco que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Es de naturaleza receptiva, ya que todos los componentes se desarrollan primero para dispositivos móviles y funcionan en cualquier tamaño de pantalla.
Un botón es un componente importante en cualquier sitio web que se utiliza para generar eventos cada vez que el usuario hace clic en el botón. Blaze UI nos brinda la funcionalidad de crear un botón simple con la ayuda del componente Botón básico .
Clase de botón básico de Blaze UI:
- .c-button: esta clase se usa para crear un botón básico simple.
Sintaxis:
<button type="button" class="c-button">
...
</button>
Ejemplo 1: El siguiente ejemplo demuestra el uso de la clase c-button para crear un botón básico simple.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 class="c-heading"> GeeksforGeeks <div class="c-heading__sub"> Blaze UI Basics Button </div> </h1> <br> <!--Basics Button--> <button type="button" class="c-button"> Button 1 </button> <button type="button" class="c-button"> Button 2 </button> <button type="button" class="c-button"> Button 3 </button> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la clase c-button con la ayuda de la cual podemos crear un botón deshabilitado y un botón de enlace.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 class="c-heading"> GeeksforGeeks <div class="c-heading__sub"> Blaze UI Basics Button </div> </h1> <br> <!--Basics Button--> <button type="button" class="c-button"> Button 1 </button> <!--Disabled Button--> <button type="button" class="c-button" disabled> Disabled Button </button> <!--Link Button--> <a class="c-button"> Link Button </a> </body> </html>
Producción:
Enlace de referencia: https://www.blazeui.com/components/buttons
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA