En este artículo, veremos botones de Blaze UI de diferentes tamaños. Blaze UI es un conjunto de herramientas de interfaz de usuario gratuito y de código abierto para crear un excelente sitio web. Le proporciona varias características como capacidad de respuesta, componentes personalizados, etc.
Los botones de Blaze UI están disponibles en 6 tamaños diferentes y se analizan a continuación con sus clases.
Clases de tamaños de botones de Blaze UI:
- c-button u-xsmall- Esta clase se usa para crear un botón en un tamaño extra pequeño.
- c-button u-small- Esta clase se usa para crear un botón en un tamaño pequeño.
- c-button u-medium- Esta clase se usa para crear un botón de tamaño mediano.
- c-button u-large- Esta clase se utiliza para crear un botón de gran tamaño.
- c-button u-xlarge- Esta clase se usa para crear un botón en un tamaño extra grande.
- c-button u-super- Esta clase se utiliza para crear un botón de gran tamaño.
Sintaxis:
<button type="button" class="c-button
c-button--info">
...
</button>
Ejemplo 1: el siguiente ejemplo muestra los diferentes tamaños de botones 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> <div class="u-centered"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Button Sizes in Blaze UI</h2> <button type="button" class="c-button u-xsmall">xsmall</button> <button type="button" class="c-button u-small">small</button> <button type="button" class="c-button u-medium">medium</button> <button type="button" class="c-button u-large">large</button> <button type="button" class="c-button u-xlarge">xlarge</button> <button type="button" class="c-button u-super">super</button> </div> </body> </html>
Producción:
Tamaños de los botones de la interfaz de usuario de Blaze
Ejemplo 2: a continuación se muestra otro ejemplo que demuestra los diferentes tamaños de botones 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> <div class="u-centered"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Button Sizes in Blaze UI</h2> <button type="button" class="c-button u-xsmall"> xsmall </button> <button type="button" class= "c-button c-button--info u-small"> small </button> <button type="button" class= "c-button c-button--success u-medium"> medium </button> <button type="button" class= "c-button c-button--warning u-large"> large </button> <button type="button" class= "c-button c-button--error u-xlarge"> xlarge </button> <button type="button" class= "c-button c-button--brand u-super"> super </button> </div> </body> </html>
Producción:
Tamaños de los botones de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/buttons
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA