Beautiful Upload Buttons For Bulma Framework

Category: CSS & CSS3 , Form | September 2, 2020
Author: justboil
Views Total: 121 views
Official Page: Go to website
Last Update: September 2, 2020
License: MIT

Preview:

Beautiful Upload Buttons For Bulma Framework

Description:

A CSS extension for Bulma framework that helps you create customizable, pretty nice file upload buttons for uploaders.

How to use it:

1. Install and import the bulma-upload-control into your Bulma project.

# NPM
$ npm i bulma-upload-control --save
/* Bulma */
@import "node_modules/bulma/bulma";
/* Bulma Upload Control */
@import "node_modules/bulma-upload-control/bulma-upload-control";

2. Or directly load the compiled CSS main.min.css after Bulma’s stylesheet.

<!-- Bulma Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bulma.min.css" />
<!-- Bulma Upload Control -->
<link rel="stylesheet" href="/path/to/css/main.min.css" />

3. Create a basic file upload button and determine the theme using the following CSS classes:

  • is-primary
  • is-info
  • is-success
  • is-danger
  • is-warning
<div class="field">
  <label class="upload control">
    <a class="button is-primary">
      <span>Click to upload</span>
    </a>
    <input type="file">
  </label>
</div>

4. Disable the file upload button by using the disabled attribute:

<div class="field">
  <label class="upload control">
    <a class="button is-info" disabled>
      <span>Click to upload</span>
    </a>
    <input type="file" disabled>
  </label>
</div>

5. Customize the size of the file upload button.

  • is-small
  • is-medium
  • is-large
<div class="field file">
  <label class="upload control">
    <a class="button is-medium is-primary">
      <span>Click to upload</span>
    </a>
    <input type="file">
  </label>
</div>

6. Apply a ‘is loading’ status to the file upload button.

<div class="field">
  <label class="upload control">
    <a class="button is-loading is-info">
      <span class="icon"><i class="mdi mdi-upload">ANY LOADING ICON HERE</i></span>
      <span>Click to upload</span>
    </a>
    <input type="file">
  </label>
</div>

You Might Be Interested In:


Leave a Reply