jQuery+CSS3创意表单提交按钮动画特效

PetitQ 按钮图标 2018-10-27 1.94K 0 1

这是一款非常有创意的 jQuery 和 CSS3 表单提交按钮动画特效。该提交按钮在用户点击的时候会转换为一个进度条，用以表示当前提交的进程，当提交结束后，进度条优惠转换为一个圆形的成功符号，效果非常酷。

HTML 结构：

该提交按钮特效的 HTML 结构使用一个

也想出现在这里？联系我们吧

来包裹一个按钮。按钮中 div.fill 是进度条元素，.fa-check 是 font-awesome 图标，这是提交成功后的圆形图标。

```
<div id="button-wrapper">
```
```
    <button>
```
```
        <p>Upload Something</p>
```
```
        <div class="fill"></div>
```
```
        <div class="fa fa-check"></div>
```
```
    </button>
```
```
</div>
```

CSS 样式：

该提交按钮特效的按钮包裹元素#button-wrapper 被绝对定位到屏幕中间，宽度设置为 450 像素，并添加了 ease 平滑过渡效果。

```
#button-wrapper {
```
```
    width: 450px;
```
```
    text-align: center;
```
```
    padding: 0 100px;
```
```
    box-sizing: border-box;
```

    -webkit-transition: .3s all ease .3s;

```
    transition: .3s all ease .3s;
```
```
    position: absolute;
```
```
    top: 50%;
```
```
    left: 50%;
```

    -webkit-transform: translate3d(-50%, -50%, 0);

    transform: translate3d(-50%, -50%, 0);

```
}
```

按钮元素使用相对定位，设置了一个大圆角和 ease 平滑过渡效果。

```
button {
```
```
    width: 100%;
```
```
    background: #8e44ad;
```
```
    border: none;
```
```
    border-radius: 50px;
```
```
    padding: 5px 0;
```
```
    cursor: pointer;
```
```
    -webkit-transition: .3s all ease;
```
```
    transition: .3s all ease;
```
```
    position: relative;
```
```
}
```

进度条.fill 元素使用绝对定位，开始时宽度被设置为 0，并设置了一个圆角。

```
button .fill {
```
```
    position: absolute;
```
```
    top: 0;
```
```
    left: 0;
```
```
    bottom: 0;
```
```
    right: 0;
```
```
    width: 0%;
```
```
    background: #8e44ad;
```
```
    border-radius: 50px;
```
```
}
```

该提交按钮特效中使用 jQuery 来处理按钮的点击事件，在按钮被点击的时候，它的父元素被添加了 clicked class。在 clicked 样式中，按钮上的文字被隐藏，按钮的高度被减小到 25px，进度条的宽度被设置为 100%。这样便制作出了按钮转换为进度条并开始动画的效果。

```
#button-wrapper.clicked {
```
```
    padding: 0;
```
```
}
```
```
 
```
```
#button-wrapper.clicked button {
```
```
    background: #ccc;
```
```
    margin-top: 25px;
```
```
}
```
```
 
```
```
#button-wrapper.clicked button p {
```
```
    max-height: 0;
```
```
    overflow: hidden
```
```
}
```
```
 
```
```
#button-wrapper.clicked button .fill {
```
```
    width: 100%;
```

    -webkit-transition: .3s all ease .3s;

```
    transition: 2s all ease .6s;
```
```
}
```

最后进度条转换为圆形图标的原理基本类似，具体请参考源文件代码。

JAVASCRIPT 代码：

该进度条特效中使用 jQuery 来处理按钮的点击事件，在按钮被点击的时候为它的父元素添加.clicked class，并在延迟 2600 毫秒后为按钮添加.success class。.clicked class 或激活进度条动画，.success class 会使进度条转换为圆形的图标。

```
(function () {
```
```
    'use strict';
```
```
    var $button = $('button');
```
```
    $button.on('click', function () {
```

        $(this).parent().addClass('clicked').delay(2600).queue(function () {

            $(this).addClass('success');

```
        });
```
```
    });
```
```
}());
```

jQuery+CSS3 创意表单提交按钮动画特效

已有 485 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

按钮图标

jQuery+CSS3创意表单提交按钮动画特效

HTML 结构：

CSS 样式：

JAVASCRIPT 代码：

jQuery+CSS3 创意表单提交按钮动画特效

相关文章

好看蓝色矩形交互动态按钮样式特效

基于SVG的jQuery旋转按钮插件

Bootstrap 超酷3D按钮设计效果

发表回复取消回复

热销模板

按钮图标

HTML 结构：

CSS 样式：

JAVASCRIPT 代码：

jQuery+CSS3 创意表单提交按钮动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复