使用CSS3实现的一组创意进度条按钮样式

Progress Button Styles 当点击表单提交（Submit）按钮时，利用按钮本身（填充方式）显示进度。3D翻转效果使用transform-style: preserve-3d实现，如果浏览器不支持则回退到平面填充动画。

模板，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2320
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

</head>

<header>
            <h1>Progress Button Styles <span>Creative effects for loading buttons</span></h1>
            <p class="note">Without support for <em>transform-style: preserve-3d</em> you will see the fallback style (fill horizontal).</p>
        </header>
        <div class="wrapper">
            <section>
                <h2>fill horizontal</h2>
                <button class="progress-button" data-style="fill" data-horizontal>Submit</button>
            </section>
            <section>
                <h2>fill vertical</h2>
                <button class="progress-button" data-style="fill" data-vertical>Submit</button>
            </section>
            <section>
                <h2>shrink horizontal</h2>
                <button class="progress-button" data-style="shrink" data-horizontal>Submit</button>
            </section>
            <section>
                <h2>shrink vertical</h2>
                <button class="progress-button" data-style="shrink" data-vertical>Submit</button>
            </section>
        </div>
        <div class="wrapper">
            <section>
                <h2>rotate-angle-bottom <br/>perspective</h2>
                <button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Submit</button>
            </section>
            <section>
                <h2>rotate-angle-top <br/>perspective</h2>
                <button class="progress-button" data-style="rotate-angle-top" data-perspective data-horizontal>Submit</button>
            </section>
            <section>
                <h2>rotate-angle-left <br/>perspective</h2>
                <button class="progress-button" data-style="rotate-angle-left" data-perspective data-vertical>Submit</button>
            </section>
            <section>
                <h2>rotate-angle-right <br/>perspective</h2>
                <button class="progress-button" data-style="rotate-angle-right" data-perspective data-vertical>Submit</button>
            </section>
        </div>
        <div class="wrapper">
            <section>
                <h2>rotate-side-down <br/>perspective</h2>
                <button class="progress-button" data-style="rotate-side-down" data-perspective data-horizontal>Submit</button>
            </section>
            <section>
                <h2>rotate-side-up <br/>perspective</h2>
                <button class="progress-button" data-style="rotate-side-up" data-perspective data-horizontal>Submit</button>
            </section>
            <section>
                <h2>rotate-side-left <br/>perspective</h2>
                <button class="progress-button" data-style="rotate-side-left" data-perspective data-vertical>Submit</button>
            </section>
            <section>
                <h2>rotate-side-right <br/>perspective</h2>
                <button class="progress-button" data-style="rotate-side-right" data-perspective data-vertical>Submit</button>
            </section>
        </div>
        <div class="wrapper">
            <section>
                <h2>rotate-back <br/>perspective</h2>
                <button class="progress-button" data-style="rotate-back" data-perspective data-horizontal>Submit</button>
            </section>
            <section>
                <h2>flip-open <br/>perspective</h2>
                <button class="progress-button" data-style="flip-open" data-perspective data-horizontal>Submit</button>
            </section>
            <section>
                <h2>slide-down <br/>horizontal</h2>
                <button class="progress-button" data-style="slide-down" data-horizontal>Submit</button>
            </section>
            <section>
                <h2>move-up <br/>horizontal</h2>
                <button class="progress-button" data-style="move-up" data-horizontal>Submit</button>
            </section>
        </div>
        <div class="wrapper">
            <section>
                <h2>top-line <br/>horizontal</h2>
                <button class="progress-button" data-style="top-line" data-horizontal>Submit</button>
            </section>
            <section>
                <h2>lateral-lines <br/>vertical</h2>
                <button class="progress-button" data-style="lateral-lines" data-vertical>Submit</button>
            </section>
        </div>
    </div>
    
    <script src="https://tympanus.net/Development/ProgressButtonStyles/js/classie.js"></script>
    <script src="https://tympanus.net/Development/ProgressButtonStyles/js/progressButton.js"></script>
    <script>
        [].slice.call(document.querySelectorAll('button.progress-button')).forEach(function(bttn) {
            new ProgressButton(bttn, {
                callback: function(instance) {
                    var progress = 0,
                        interval = setInterval(function() {
                            progress = Math.min(progress + Math.random() * 0.1, 1);
                            instance._setProgress(progress);

if (progress === 1) {
                                instance._stop(1);
                                clearInterval(interval);
                            }
                        }, 200);
                }
            });
        });
    </script>
</body>

</html>

Progress Button Styles 当点击表单提交（Submit）按钮时，利用按钮本身（填充方式）显示进度。3D翻转效果使用transform-style: preserve-3d实现，如果浏览器不支持则回退到平面填充动画。

模板，教程

编辑器支持Emmet

快捷键

Progress Button Styles 当点击表单提交（Submit）按钮时，利用按钮本身（填充方式）显示进度。3D翻转效果使用transform-style: preserve-3d实现，如果浏览器不支持则回退到平面填充动画。

模板，教程

使用CSS3实现的富有创意而精致的悬停动效

使用CSS3实现的富有创意而精致的悬停动效系列2

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：