CSS非常漂亮的文件上传按钮样式代码

演示  website 下载

这是一款非常漂亮，可定制的文件上传按钮样式代码。

使用方法：

1.在html页面中加载样式文件，如下所示：

<link rel="stylesheet" href="css/bulma.min.css">
<link rel="stylesheet" href="css/main.min.css">

2.创建一个基本文件上载按钮，并使用以下CSS类确定主题：

• 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>

3.使用disabled属性，禁用“文件上载”按钮：

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

4.自定义文件上载按钮的大小。

• 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>

5.将“正在加载”状态应用于“文件上载”按钮。

<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>

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。