ဘေ့စ် ပုံ ကို ပြုလုပ်ခြင်း

CSS ကို အသုံးပြု၍ ဘေ့စ် ပုံ ကို ပြုလုပ်ခြင်း အနှိပြန်

ဘေ့စ် ပုံ အပြုအမူ ကျသော ပုံ ပြုလုပ်ခြင်း အနှိပြန်

ပထမ အစိတ် - အချက်အလက် HTML ထပ်ပေးပါ

အကြယ် အပြုအမူ အချက်အလက် ထပ်ပေးပါ အစား အကြယ် Font Awesome ကို ထပ်ပေးပါ နှင့် အချက်အလက် ကို HTML ဘေ့စ် ပုံ ထဲမှာ ထပ်ပေးပါ

<!-- အကြယ် အပြုအမူ အချက်အလက် ထပ်ပေးပါ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- ဘေ့စ် ပုံ အတွက် Font Awesome အကြယ် အပြုအမူ ထပ်ပေးပါ (fa-spin အကြယ် အပြုအမူ အကြယ် ပြောင်လဲပါ) -->
<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Loading
</button>
<button class="buttonload">
  <i class="fa fa-circle-o-notch fa-spin"></i>Loading
</button>
<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Loading
</button>

ဒုတိယ အစိတ် - စက်လုံး CSS ထပ်ပေးပါ

/* ဘေ့စ် ပုံ အပြုအမူ ကျသော ပုံ */
.buttonload {
  background-color: #04AA6D; /* အဖြူအမွှား အကြောင်း */
  border: none; /* အဖက်အနည်း ကျသော ပုံ */
  color: white; /* အဖြူ အမှတ် */
  padding: 12px 16px; /* အတွင်းအဝိုင်း အဝက်အနည်း */
  font-size: 16px /* စာဖတ်ရွား အရွယ် ကျသော ပုံ */
}

ကိုယ်တိုင် စစ်ဆေးလေ့လာပါ

ကွန်ပျူတာ ပိုင်းခြား

教程:图标教程

教程:CSS 按钮

教程:如何创建 CSS 加载器