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 mantenible. 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.
Un botón es un componente importante para cualquier sitio web que se utiliza para generar eventos cada vez que el usuario hace clic en el botón . Hay situaciones en las que necesitamos algunos botones y cada botón debe tener un color diferente. La interfaz de usuario de Blaze proporciona esta funcionalidad y se conoce como Button Colors .
Clases de colores de los botones de la interfaz de usuario de Blaze:
- c-button: esta clase se utiliza para crear un botón de color púrpura claro.
- c-button–brand: esta clase se utiliza para crear un botón de color azul oscuro.
- c-button–info: esta clase se usa para crear un botón de color azul.
- c-button–warning: esta clase se utiliza para crear un botón de color amarillo.
- c-button–success: esta clase se utiliza para crear un botón de color verde.
- c-button–error: esta clase se utiliza para crear un botón de color rojo.
Sintaxis:
<button type="button" class="c-button c-button--brand">
...
</button>
Nota: La sintaxis para las otras clases es la misma excepto por el nombre de la clase que cambiará.
Ejemplo 1: El siguiente ejemplo demuestra el uso de las clases c-button , c-button–brand y c-button–info .
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">
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 class="c-heading" style="color:green">GeeksforGeeks
<div class="c-heading__sub"> Blaze UI Button Colors </div>
</h1>
<br>
<button type="button" class="c-button"> <!--c-button-->
Light Purple Button
</button>
<!--c-button--brand-->
<button type="button" class="c-button c-button--brand">
Dark Blue Button
</button>
<!--c-button--brand-->
<button type="button" class="c-button c-button--info">
Blue Button
</button>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el uso de las clases c-button–warning , c-button–success y c-button–error .
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">
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 class="c-heading" style="color:green">GeeksforGeeks
<div class="c-heading__sub"> Blaze UI Button Colors </div>
</h1>
<br>
<!--c-button--warning-->
<button type="button" class="c-button c-button--warning">
Yellow Button
</button>
<!--c-button--error-->
<button type="button" class="c-button c-button--error">
Red Button
</button>
<!--c-button--success-->
<button type="button" class="c-button c-button--success">
Green Button
</button>
</body>
</html>
Producción:
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