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