In this guide, we will discuss Button in Bulma.
Description
A button element provide user interaction with custom button styles and can be used as actions in forms, dialogs and supports different types of sizes, colors, states etc. The button can include in the page by using .button class on the anchor links, input tag etc.
Colors and Sizes
The below example describes color by using color modifiers such as is-primary, is-info, is-link, is-success, is-warning, is-danger and sizes such as is-small, is-medium and is-large classes of buttons β
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Buttons Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Buttons
</span>
<br>
<br>
<span class = "is-size-5">
Basic Buttons
</span>
<br>
<a class = "button">Anchor</a>
<button class = "button">Button</button>
<input class = "button" type = "submit" value = "Submit">
<br>
<br>
<span class = "is-size-5">
Button Colors
</span>
<br>
<a class = "button is-white">White</a>
<a class = "button is-light">Light</a>
<a class = "button is-dark">Dark</a>
<a class = "button is-black">Black</a>
<a class = "button is-text">Text</a>
<br>
<br>
<a class = "button is-primary">Primary</a>
<a class = "button is-link">Link</a>
<a class = "button is-info">Info</a>
<a class = "button is-success">Success</a>
<a class = "button is-warning">Warning</a>
<a class = "button is-danger">Danger</a>
<br>
<br>
<span class = "is-size-5">
Button Sizes
</span>
<br>
<a class = "button is-small">Small Button</a>
<a class = "button">Normal Button</a>
<a class = "button is-medium">Medium Button</a>
<a class = "button is-large">Large Button</a>
</div>
</section>
</body>
</html>
Styles
The below example describes different types of styles by using classes such as is-outlined, is-inverted, is-rounded along with color modifiers of buttons β
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Buttons Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Buttons Styles
</span>
<br>
<br>
<span class = "is-size-5">
Outlined Buttons
</span>
<br>
<a class = "button is-outlined">Outlined</a>
<a class = "button is-primary is-outlined">Outlined</a>
<a class = "button is-link is-outlined">Outlined</a>
<a class = "button is-info is-outlined">Outlined</a>
<a class = "button is-success is-outlined">Outlined</a>
<a class = "button is-danger is-outlined">Outlined</a>
<br>
<br>
<span class = "is-size-5">
Inverted Buttons (text color becomes background color, and vice-versa)
</span>
<br>
<div class = "columns">
<div class = "column is-narrow ">
<div class = "box has-background-info" >
<a class = "button is-primary is-inverted">Inverted</a>
<a class = "button is-link is-inverted">Inverted</a>
<a class = "button is-info is-inverted">Inverted</a>
<a class = "button is-success is-inverted">Inverted</a>
<a class = "button is-danger is-inverted">Inverted</a>
</div>
</div>
</div>
<span class = "is-size-5">
Inverted Outlined Buttons (
invert color becomes the text and border colors)
</span>
<br>
<div class = "columns">
<div class = "column is-narrow ">
<div class = "box has-background-info" >
<a class = "button is-primary is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-link is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-info is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-success is-inverted is-outlined">Invert Outlined</a>
<a class = "button is-danger is-inverted is-outlined">Invert Outlined</a>
</div>
</div>
</div>
<span class = "is-size-5">
Rounded buttons
</span>
<br>
<br>
<a class = "button is-rounded">Rounded</a>
<a class = "button is-primary is-rounded">Rounded</a>
<a class = "button is-link is-rounded">Rounded</a>
<a class = "button is-info is-rounded">Rounded</a>
<a class = "button is-success is-rounded">Rounded</a>
<a class = "button is-danger is-rounded">Rounded</a>
</div>
</section>
</body>
</html>
States
The button can be displayed in the different types of states by using classes such as is-focused, is-active, is-loading and buttons with icons as described in the below example β
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Buttons Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Buttons States
</span>
<br>
<br>
<span class = "is-size-5">
Normal Buttons
</span>
<br>
<a class = "button">Normal</a>
<a class = "button is-primary">Normal</a>
<a class = "button is-link">Normal</a>
<br>
<br>
<span class = "is-size-5">
Focus Buttons
</span>
<br>
<a class = "button is-focused">Focus</a>
<a class = "button is-primary is-focused">Focus</a>
<a class = "button is-link is-focused">Focus</a>
<br>
<br>
<span class = "is-size-5">
Active Buttons
</span>
<br>
<a class = "button is-active">Active</a>
<a class = "button is-primary is-active">Active</a>
<a class = "button is-link is-active">Active</a>
<br>
<br>
<span class = "is-size-5">
Loading buttons
</span>
<br>
<br>
<a class = "button is-loading">Loading</a>
<a class = "button is-primary is-loading">Loading</a>
<a class = "button is-link is-loading">Loading</a>
<br>
<br>
<span class = "is-size-5">
Disabled buttons
</span>
<br>
<br>
<a class = "button" title = "Disabled button" disabled>Disabled</a>
<a class = "button is-primary" title = "Disabled button" disabled>Disabled</a>
<a class = "button is-link" title = "Disabled button" disabled>Disabled</a>
<br>
<br>
<span class = "is-size-5">
Buttons with Icons
</span>
<br>
<br>
<p class = "buttons">
<a class = "button is-primary">
<span class = "icon">
<i class = "fab fa-youtube"></i>
</span>
<span>Youtube</span>
</a>
<a class = "button is-success">
<span class = "icon is-small">
<i class = "fas fa-bookmark"></i>
</span>
<span>Bookmark</span>
</a>
<a class = "button is-danger is-outlined">
<span>Delete</span>
<span class = "icon is-small">
<i class = "fas fa-trash"></i>
</span>
</a>
</p>
<span class = "is-size-5">
Buttons group with addons
</span>
<br>
<br>
<div class = "field has-addons">
<p class = "control">
<a class = "button">
<span class = "icon is-small">
<i class = "fas fa-bold"></i>
</span>
<span>Bold</span>
</a>
</p>
<p class = "control">
<a class = "button">
<span class = "icon is-small">
<i class = "fas fa-italic"></i>
</span>
<span>Italic</span>
</a>
</p>
<p class = "control">
<a class = "button">
<span class = "icon is-small">
<i class = "fas fa-underline"></i>
</span>
<span>Underline</span>
</a>
</p>
</div>
</div>
</section>
</body>
</html>
Next Topic : Click Here
Pingback: Bulma - Elements | Adglob Infosystem Pvt Ltd
Pingback: Bulma - Tag and Title | Adglob Infosystem Pvt Ltd
Pingback: penis prosthetic big penis big prosthetic big dildo erect penis prosthetic
Pingback: ν°λΉμν€