دکمه انیمیشنی در حالت غیر فعال

نوشته‌شده در در آموزش های عمومی
Loading Likes...

HTML

<button class="button">Normal state </button>

<br><br>

<button class="button disabled in-progress">Please wait...</button>

 

CSS

body {
    padding: 0px;
}

.button {
  -webkit-transition: box-shadow 0.15s  ;
  -moz-transition: box-shadow 0.15s  ;
  -ms-transition: box-shadow 0.15s  ;
  -o-transition: box-shadow 0.15s  ;
  transition: box-shadow 0.15s  ;
  border: 1px solid #b2afa5;
  border-color: #e1e0dc #c9c8c1 #b2afa5;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.439);
  background: -webkit-linear-gradient(top, #f6f5f0, #e1e0dc);
  background: -moz-linear-gradient(top, #f6f5f0, #e1e0dc);
  background: -ms-linear-gradient(top, #f6f5f0, #e1e0dc);
  background: -o-linear-gradient(top, #f6f5f0, #e1e0dc);
  background: linear-gradient(top, #f6f5f0, #e1e0dc);
  -pie-background: linear-gradient(top, #f6f5f0, #e1e0dc);
  color: #6b635b;
  -webkit-box-shadow: rgba(255, 255, 255, 0) 0 0 1px 0, rgba(255, 255, 255, 0) 0 0 0 1px inset, white 0 1px 0 0;
  -moz-box-shadow: rgba(255, 255, 255, 0) 0 0 1px 0, rgba(255, 255, 255, 0) 0 0 0 1px inset, white 0 1px 0 0;
  -ms-box-shadow: rgba(255, 255, 255, 0) 0 0 1px 0, rgba(255, 255, 255, 0) 0 0 0 1px inset, white 0 1px 0 0;
  -o-box-shadow: rgba(255, 255, 255, 0) 0 0 1px 0, rgba(255, 255, 255, 0) 0 0 0 1px inset, white 0 1px 0 0;
  box-shadow: rgba(255, 255, 255, 0) 0 0 1px 0, rgba(255, 255, 255, 0) 0 0 0 1px inset, white 0 1px 0 0;
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  line-height: normal;
  text-align: center;
  color: #6b635b;
  padding: 5px 9px;
  text-decoration: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;    
}

.button.disabled {
  color: #bdbbb9;
  border: 1px solid #d3d3d3;
  cursor: auto;
  text-shadow: white 0 1px 0;
  -webkit-box-shadow: white 0 1px 0 0 inset;
  -moz-box-shadow: white 0 1px 0 0 inset;
  -ms-box-shadow: white 0 1px 0 0 inset;
  -o-box-shadow: white 0 1px 0 0 inset;
  box-shadow: white 0 1px 0 0 inset;
}

.in-progress {
      text-shadow: none;
  background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), -webkit-linear-gradient(top, #f6f5f0, #e1e0dc);
  background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), -moz-linear-gradient(top, #f6f5f0, #e1e0dc);
  background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), -ms-linear-gradient(top, #f6f5f0, #e1e0dc);
  background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), -o-linear-gradient(top, #f6f5f0, #e1e0dc);
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), linear-gradient(top, #f6f5f0, #e1e0dc);
  -pie-background: linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, transparent 75%, transparent), linear-gradient(top, #f6f5f0, #e1e0dc);
  background-repeat: repeat;
  -webkit-background-size: 40px 40px;
  -moz-background-size: 40px 40px;
  -ms-background-size: 40px 40px;
  -o-background-size: 40px 40px;
  background-size: 40px 40px;
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -moz-animation: progress-bar-stripes 2s linear infinite;
  -ms-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}

@-webkit-keyframes progress-bar-stripes {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

@-moz-keyframes progress-bar-stripes {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

@keyframes progress-bar-stripes {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

 

JAVA SCRIPT

ندارد

دموی آنلاین

تا بارگذاری کامل کمی صبر کنید.

See the Pen Candybar button animatio by Cemre Güngör (@cemre) on CodePen



سوالی دارید؟

بدون گرفتن نتیجه اینجا رو ترک نکنید! هر سوالی دارید میتونید در عرض ۱۵ ثانیه ثبت نام و خیلی زود جواب بگیرید.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

4 + 6 =