Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Los botones en Bulma CSS tienen diseños clásicos en diferentes colores, tamaños y estados, lo que lo hace interactivo.
Ejemplo 1: Este ejemplo crea botones de colores usando Bulma.
<!DOCTYPE html>
<html>
<head>
<title>Bulma buttons</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
.buttons {
display: block;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<h1 style='color:green;margin-top:30px'
class='title'>Colored Buttons</h1>
<div class='buttons'>
<button class="button is-info">
Info
</button>
<button class="button is-success">
Success
</button>
<button class="button is-warning">
Warning
</button>
<button class="button is-danger">
Danger
</button>
<button class="button is-dark">
Dark
</button>
<button class="button is-light">
Light
</button>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo crea botones de diferentes tamaños.
<!DOCTYPE html>
<html>
<head>
<title>Bulma buttons</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
.buttons {
display: block;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<h1 style='color:green;margin-top:30px'
class='title'>
Different sizes Buttons
</h1>
<div class='buttons'>
<button class="button is-small is-primary">
Small
</button>
<button class="button is-primary">
Default
</button>
<button class="button is-normal is-primary">
Normal
</button>
<button class="button is-medium is-primary">
Medium
</button>
<button class="button is-large is-primary">
Large
</button>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: este ejemplo crea botones delineados.
<!DOCTYPE html>
<html>
<head>
<title>Bulma buttons</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
.buttons {
display: block;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<h1 style='color:green;margin-top:80px'
class='title'>Outlined Buttons</h1>
<div class='buttons'>
<button class="button is-primary
is-outlined">Outlined</button>
<button class="button is-info
is-outlined">Outlined</button>
<button class="button is-success
is-outlined">Outlined</button>
<button class="button is-warning
is-outlined">Outlined</button>
<button class="button is-danger
is-outlined">Outlined</button>
<button class="button is-link
is-outlined">Outlined</button>
</div>
</div>
</body>
</html>
Producción:
Nota: Botón con contorno significa que solo se ven los contornos de un botón y, al pasar el cursor sobre el botón, se convierte en un botón de bloque completo con un color de fondo visible como el cuarto botón de la imagen.
Ejemplo 4: Este ejemplo crea botones redondeados usando Bulma.
<!DOCTYPE html>
<html>
<head>
<title>Bulma buttons</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
.buttons {
display: block;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<h1 style='color:green;margin-top:80px'
class='title'>Rounded Buttons</h1>
<div class='buttons'>
<button class="button is-primary
is-rounded">Outlined</button>
<button class="button is-info
is-rounded">Outlined</button>
<button class="button is-success
is-rounded">Outlined</button>
<button class="button is-warning
is-rounded">Outlined</button>
<button class="button is-danger
is-rounded">Outlined</button>
<button class="button is-link
is-rounded">Outlined</button>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: Este ejemplo crea botones de carga usando Bulma.
<!DOCTYPE html>
<html>
<head>
<title>Bulma buttons</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
.buttons {
display: block;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<h1 style='color:green;margin-top:80px'
class='title'>Loading Buttons</h1>
<div class='buttons'>
<button class="button is-primary
is-loading">Loading</button>
<button class="button is-info
is-loading">Loading</button>
<button class="button is-success
is-loading">Loading</button>
<button class="button is-warning
is-loading">Loading</button>
<button class="button is-danger
is-loading">Loading</button>
<button class="button is-link
is-loading">Loading</button>
</div>
</div>
</body>
</html>
Producción:
Nota: El semicírculo de los botones sigue girando, es decir, algo se carga.
Ejemplo 6: este ejemplo crea botones de íconos de fuente impresionante.
<!DOCTYPE html>
<html>
<head>
<title>Bulma buttons</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
.buttons {
display: block;
}
</style>
</head>
<body>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<div class='container has-text-centered'>
<h1 style='color:green;margin-top:80px'
class='title'>
font-awesome icon Buttons
</h1>
<div class="buttons">
<button class="button">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</button>
<button class="button is-primary">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span>@SarahKhan__</span>
</button>
<button class="button is-success">
<span class="icon is-small">
<i class="fas fa-check"></i>
</span>
<span>Save</span>
</button>
<button class="button is-danger
is-outlined">
<span>Delete</span>
<span class="icon is-small">
<i class="fas fa-times"></i>
</span>
</button>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA