En Bulma , los botones están disponibles en muchos colores. Podemos configurar los colores del botón según nuestros requisitos. Hay muchas clases de colores en Bulma, todas las clases se mencionan y describen a continuación.
Clases de colores de botones:
- is-white: esta clase se utiliza para el color blanco del botón.
- is-black: esta clase se utiliza para el color negro del botón.
- is-light: esta clase se utiliza para el color claro del botón.
- is-dark: Esta clase se usa para el color oscuro del botón.
- is-text: esta clase se utiliza para la apariencia de texto del botón.
- is-ghost: esta clase se usa para la apariencia fantasmal del botón.
- is-primary: esta clase se usa para dar el color principal del botón.
- is-link: esta clase se utiliza para dar el color de enlace del botón.
- is-info: esta clase se usa para dar el color de información del botón.
- is-success: esta clase se utiliza para dar el color de éxito del botón.
- is-warning: Esta clase se usa para dar el color de advertencia del botón.
- is-danger: esta clase se usa para dar el color de peligro del botón.
Sintaxis:
<button class="button Colors-classes">...</button>
Los siguientes ejemplos muestran los colores de los botones de Bulma.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Button Colors</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <button class="button is-white"> White </button> <button class="button is-light"> Light </button> <button class="button is-dark"> Dark </button> <button class="button is-black"> Black </button> <button class="button is-text"> Text < /button> <button class="button is-ghost"> Ghost </button> </body> </html>
Producción:
Colores de los botones de Bulma
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Button Colors</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div> <button class="button is-primary"> GeeksforGeeks </button> <button class="button is-link"> GeeksforGeeks </button> <button class="button is-info"> GeeksforGeeks </button> <button class="button is-success"> GeeksforGeeks </button> <button class="button is-warning"> GeeksforGeeks </button> <button class="button is-danger"> GeeksforGeeks </button> </div> </body> </html>
Producción:
Colores de los botones de Bulma
Ejemplo 3: También podemos agregar una versión ligera al color del botón usando is-light al modificador de color.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Button Colors</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="buttons"> <button class="button is-primary is-light"> GeeksforGeeks </button> <button class="button is-link is-light"> GeeksforGeeks </button> <button class="button is-info is-light"> GeeksforGeeks </button> <button class="button is-success is-light"> GeeksforGeeks </button> <button class="button is-warning is-light"> GeeksforGeeks </button> <button class="button is-danger is-light"> GeeksforGeeks </button> </div> </body> </html>
Producción:
Colores de los botones de Bulma
Referencia: https://bulma.io/documentation/elements/button/#colors
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA