Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y fácil de mantener. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
Los botones nos ayudan a iniciar una acción, como enviar un formulario, navegar a otro enlace, etc. Hay varios tipos de botones en la interfaz de usuario de Blaze, como el botón básico, el botón fantasma, el botón redondeado, el botón de estado activo, el botón de ancho completo, y muchos más. En este artículo, analizaremos el botón de estado activo en la interfaz de usuario de Blaze.
El estado activo de los botones muestra que el botón ya está presionado a través de un color de fondo más oscuro. Para crear un botón de estado activo en la interfaz de usuario de Blaze, usamos la clase .c-button–active junto con la clase .c-button . Estas clases se pueden aplicar al elemento <button> así como al elemento <a>.
Blaze UI Button Active State clases utilizadas:
- .c-button–active: esta clase oscurece el color de fondo del botón para mostrar el estado activo.
Sintaxis:
<button class="c-button c-button--active">
...
</button>
Ejemplo 1: este ejemplo demuestra el botón de estado activo básico en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <strong>Blaze UI Active State Button</strong> <br> <span class="c-input-group"> <button type="button" class="c-button"> Button </button> <button type="button" class="c-button c-button--active"> Button active </button> </span> </center> </body> </html>
Producción:
Estado activo del botón Blaze UI
Ejemplo 2: este ejemplo demuestra la variación de todos los colores del botón de estado activo en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <strong>Blaze UI Active State Button</strong> <br> <span class="c-input-group"> <button type="button" class="c-button c-button--brand">Button</button> <button type="button" class="c-button c-button--active c-button--brand"> Button active </button> </span> <br /><br /> <span class="c-input-group"> <button type="button" class="c-button c-button--info">Button</button> <button type="button" class="c-button c-button--active c-button--info"> Button active </button> </span> <br /><br /> <span class="c-input-group"> <button type="button" class="c-button c-button--success">Button</button> <button type="button" class="c-button c-button--active c-button--success"> Button active </button> </span> <br /><br /> <span class="c-input-group"> <button type="button" class="c-button c-button--error">Button</button> <button type="button" class="c-button c-button--active c-button--error"> Button active </button> </span> <br /><br /> <span class="c-input-group"> <button type="button" class="c-button c-button--warning">Button</button> <button type="button" class="c-button c-button--active c-button--warning"> Button active </button> </span> </center> </body> </html>
Producción:
Estado activo del botón Blaze UI
Referencia: https://www.blazeui.com/components/buttons/
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA