angular-progress-button-styles/dist/angular-progress-button-styles.min.css

Different types of progressbuttons implemented on AngularJS

.progress-button-style-fill.progress-button-dir-horizontal,.progress-button-style-fill.progress-button-dir-vertical{overflow:hidden}.progress-button{position:relative;display:inline-block;padding:0 60px;outline:0;border:none;background:#1d9650;color:#FFF;text-transform:uppercase;letter-spacing:1px;font-size:1em;line-height:4;cursor:pointer}.progress-button *,.progress-button ::before,.progress-button :after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.progress-button .notransition{-webkit-transition:none!important;transition:none!important}.progress-button.disabled,.progress-button[disabled]{cursor:default}.progress-button .content{position:relative;display:block}.progress-button .content:after,.progress-button .content:before{position:absolute;right:20px;color:#0e7138;font-family:FontAwesome;opacity:0;-webkit-transition:opacity .3s .3s;transition:opacity .3s .3s}.progress-button .content:before{content:"\f00c"}.progress-button .content:after{content:"\f05e"}.progress-button.state-error .content:after,.progress-button.state-success .content:before{opacity:1}.progress-button-style-shrink.progress-button-dir-horizontal.state-loading .content,.progress-button-style-shrink.progress-button-dir-vertical.state-loading .content{opacity:0}.progress-button .progress{background:#148544}.progress-button .progress-inner{position:absolute;left:0;background:#0e7138}.progress-button-dir-horizontal .progress-inner{top:0;width:0;height:100%;-webkit-transition:width .3s,opacity .3s;transition:width .3s,opacity .3s}.progress-button-dir-vertical .progress-inner{bottom:0;width:100%;height:0;-webkit-transition:height .3s,opacity .3s;transition:height .3s,opacity .3s}.progress-button-perspective{position:relative;display:inline-block;padding:0;background:0 0;-webkit-perspective:900px;perspective:900px}.progress-button-perspective .content,.progress-button-perspective .progress{outline:transparent solid 1px}.progress-button-perspective .progress-wrap{display:block;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.progress-button-perspective .content{padding:0 60px;background:#1d9650}.progress-button-style-fill.progress-button-dir-horizontal .content{z-index:10;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.progress-button-style-fill.progress-button-dir-horizontal .content:after,.progress-button-style-fill.progress-button-dir-horizontal .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-fill.progress-button-dir-horizontal.state-error .content,.progress-button-style-fill.progress-button-dir-horizontal.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-fill.progress-button-dir-vertical .content{z-index:10;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.progress-button-style-fill.progress-button-dir-vertical .content:after,.progress-button-style-fill.progress-button-dir-vertical .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-fill.progress-button-dir-vertical.state-error .content,.progress-button-style-fill.progress-button-dir-vertical.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-shrink.progress-button-dir-horizontal .content{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.progress-button-style-shrink.progress-button-dir-horizontal .content:after,.progress-button-style-shrink.progress-button-dir-horizontal .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-shrink.progress-button-dir-horizontal.state-loading{-webkit-transform:scaleY(.3);transform:scaleY(.3)}.progress-button-style-shrink.progress-button-dir-horizontal.state-error .content,.progress-button-style-shrink.progress-button-dir-horizontal.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-shrink{overflow:hidden;-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-shrink.progress-button-dir-vertical .content{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.progress-button-style-shrink.progress-button-dir-vertical .content:after,.progress-button-style-shrink.progress-button-dir-vertical .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-shrink.progress-button-dir-vertical.state-loading{-webkit-transform:scaleX(.1);transform:scaleX(.1)}.progress-button-style-shrink.progress-button-dir-vertical.state-error .content,.progress-button-style-shrink.progress-button-dir-vertical.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-rotate-angle-bottom .progress{position:absolute;top:100%;left:0;width:100%;height:20px;box-shadow:0 -1px 0 #148544;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}.progress-button-style-rotate-angle-bottom.state-loading .progress-wrap{-webkit-transform:rotateX(45deg);transform:rotateX(45deg)}.progress-button-style-rotate-angle-top .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;box-shadow:0 1px 0 #148544;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.progress-button-style-rotate-angle-top.state-loading .progress-wrap{-webkit-transform:rotateX(-45deg);transform:rotateX(-45deg)}.progress-button-style-rotate-angle-left .progress{position:absolute;top:0;right:100%;width:20px;height:100%;box-shadow:1px 0 0 #148544;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.progress-button-style-rotate-angle-left.state-loading .progress-wrap{-webkit-transform:rotateY(45deg);transform:rotateY(45deg)}.progress-button-style-rotate-angle-right .progress{position:absolute;top:0;left:100%;width:20px;height:100%;box-shadow:-1px 0 0 #148544;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-angle-right.state-loading .progress-wrap{-webkit-transform:rotateY(-45deg);transform:rotateY(-45deg)}.progress-button-style-rotate-side-down .progress{position:absolute;top:100%;left:0;width:100%;height:20px;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-side-down.state-loading .progress-wrap{-webkit-transform:rotateX(90deg) translateZ(10px);transform:rotateX(90deg) translateZ(10px)}.progress-button-style-rotate-side-up .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-side-up.state-loading .progress-wrap{-webkit-transform:rotateX(-90deg) translateZ(10px);transform:rotateX(-90deg) translateZ(10px)}.progress-button-style-rotate-side-left .progress-wrap{-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-left .progress{position:absolute;top:0;left:0;width:20px;height:100%;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-left.state-loading .progress-wrap{-webkit-transform:translateX(50%) rotateY(90deg) translateZ(10px);transform:translateX(50%) rotateY(90deg) translateZ(10px)}.progress-button-style-rotate-side-right .progress-wrap{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.progress-button-style-rotate-side-right .progress{position:absolute;top:0;left:100%;width:20px;height:100%;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-right.state-loading .progress-wrap{-webkit-transform:translateX(-50%) rotateY(-90deg) translateZ(10px);transform:translateX(-50%) rotateY(-90deg) translateZ(10px)}.progress-button-style-rotate-back .progress-wrap{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.progress-button-style-rotate-back .content{-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-back .progress{position:absolute;top:100%;left:0;width:100%;height:100%;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-flip-open .progress,.progress-button-style-move-up .progress,.progress-button-style-slide-down .progress{width:100%;position:absolute;top:0;left:0;height:100%}.progress-button-style-rotate-back.state-loading .progress-wrap{-webkit-transform:rotateX(180deg) scaleX(.6) scaleY(.3);transform:rotateX(180deg) scaleX(.6) scaleY(.3)}.progress-button-style-flip-open .content{z-index:10;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;transform-origin:50% 0}.progress-button-style-flip-open.state-loading .content{-webkit-transform:rotateX(45deg);transform:rotateX(45deg)}.progress-button-style-slide-down{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-slide-down .content{z-index:10;padding:0 60px;background:#1d9650}.progress-button-style-slide-down .progress{-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-slide-down.state-loading .progress{-webkit-transform:translateY(10px);transform:translateY(10px)}.progress-button-style-move-up{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-move-up .content{z-index:10;padding:0 60px;background:#1d9650;-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-lateral-lines .content:after,.progress-button-style-lateral-lines .content:before,.progress-button-style-top-line .content:after,.progress-button-style-top-line .content:before{right:auto;left:100%;margin-left:25px}.progress-button-style-move-up.state-loading .content{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.progress-button-style-top-line .progress-inner{height:3px}.progress-button-style-lateral-lines .progress-inner{width:100%;border-right:3px solid #0e7138;border-left:3px solid #0e7138;background:0 0}