用 CSS 如何创建加载按钮？

在单击时，按钮可以显示为加载中。单击时，按钮可能会到达下一页，但就在此之前，将显示加载状态。在你的网页上，你可以轻松使用 HTML 和 CSS 显示加载按钮。首先，加载图标。

为图标设置 CDN

为了在我们的网页上添加图标，我们使用了字体恐龙图标。使用 <link> 元素将其包含在网页中 -

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

创建按钮

按钮使用 <button> 元素创建。三个不同的加载图标设置在 <i> 元素中 -

fa-spinner fa-spin
fa-circle-o-notch fa-spin
fa-refresh fa-spin

以下是将图标放在按钮上的代码 -

<button><i class="fa fa-spinner fa-spin"></i>Loading</button>
<button><i class="fa fa-circle-o-notch fa-spin"></i>Loading</button>
<button><i class="fa fa-refresh fa-spin"></i>Loading</button>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

设计按钮

按钮的样式如下 -

button {
   background-color: rgb(60, 24, 126);
   border: none;
   outline: none;
   color: white;
   padding: 12px 24px;
   font-size: 26px;
}

设计图标

使用 margin-left 和 margin-right 属性正确放置加载圆形图标 -

i {
   margin-left: -12px;
   margin-right: 8px;
}

示例

以下是使用 CSS 创建加载按钮的代码 -

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
   <style>
      button {
         background-color: rgb(60, 24, 126);
         border: none;
         outline: none;
         color: white;
         padding: 12px 24px;
         font-size: 26px;
      }
      h1{
         font-size: 50px;
         font-family: monospace,sans-serif,serif;
      }
      i {
         margin-left: -12px;
         margin-right: 8px;
      }
   </style>
</head>
<body>
   <h1>Loading Buttons Example</h1>
   <button><i class="fa fa-spinner fa-spin"></i>Loading</button>
   <button><i class="fa fa-circle-o-notch fa-spin"></i>Loading</button>
   <button><i class="fa fa-refresh fa-spin"></i>Loading</button>
</body>
</html>

更新于： 14-Dec-2023

334 次浏览

开启你的 职业

完成课程，获取认证

开始
广告