按钮提交动画

YiHangMa
1,552 阅读3分钟

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

按钮 是我们 编程 中使用频率最多的几个 交互元素 之一，点击它会产生其描述的动作。如果一个按钮上写着 提交 ，点击它很可能会 提交 一些东西。它也是任何数字产品中最重要的交互元素之一。现在 主流的按钮设计 是仍然是 扁平化为主的设计的，再结合 色彩变化、动画效果 去实现 点击反馈 。

优秀的提交按钮特征

  1. 功能突出，一个按钮应该看起来像一个按钮，让用户一看就知道他的功能
  2. 按钮与我们现实中的按钮越相似，效果越好。选择 矩形、 圆角矩形 总是 最安全的选择
  3. 上下左右 居中对齐
  4. 左右两边的内部间距是垂直间距的两倍，对于提高可读性来说，这是一个 安全的比例选择
  5. 移动端 最小像素的按钮是 50x50像素 左右，桌面端 最小像素的按钮是32x32像素
  6. 按钮内部为 图标 + 文字 的效果要比单纯的 文字提示 要好
  7. 圆角按钮 被认为比 尖锐的 边缘更友好，
  8. 如果您正在使用圆角按钮，请记住要与屏幕上的 其他元素 具有 相同的圆角比例

最终效果

提交按钮.gif

一、添加 HTML 文件

<div class="wrapper">
    <button class="">
        <span>Submit</span>
        <div class="success">
            <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 29.756 29.756" style="enable-background:new 0 0 29.756 29.756;" xml:space="preserve">
                <path d="M29.049,5.009L28.19,4.151c-0.943-0.945-2.488-0.945-3.434,0L10.172,18.737l-5.175-5.173   c-0.943-0.944-2.489-0.944-3.432,0.001l-0.858,0.857c-0.943,0.944-0.943,2.489,0,3.433l7.744,7.752   c0.944,0.943,2.489,0.943,3.433,0L29.049,8.442C29.991,7.498,29.991,5.953,29.049,5.009z" />
            </svg>
        </div>
    </button>
</div>

二、添加 CSS 文件

先初始化页面

  1. 设置 * 为 box-sizing: border-box
  2. 设置 body 来使整个项目居中
* {
    box-sizing: border-box;
}

body {
    background: #f4f4f4;
    height: 100vh;
}

主要的 CSS 代码

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

button {
    font-family: 'Ubuntu', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 170px;
    height: 40px;
    line-height: 1;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    border: 3px solid #8C82FC;
    background: #fff;
    color: #8C82FC;
    border-radius: 40px;
    cursor: pointer;
    overflow: hidden;
    transition: all .35s;
}

button:hover {
    background: #8C82FC;
    color: #fff;
}

button span {
    opacity: 1;
    visibility: visible;
    transition: all .35s;
}

.success {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: all .35s;
}

.success svg {
    width: 20px;
    height: 20px;
    fill: yellowgreen;
    transform-origin: 50% 50%;
    transform: translateY(-50%) rotate(0deg) scale(0);
    transition: all .35s;
}

button.is_active {
    width: 40px;
    height: 40px;
}

button.is_active .success {
    opacity: 1;
    visibility: visible;
}

button.is_active .success svg {
    margin-top: 50%;
    transform: translateY(-50%) rotate(720deg) scale(1);
}

button.is_active span {
    opacity: 0;
    visibility: hidden;
}

三、添加 JS 文件

主要逻辑

let btn = document.querySelector("button");

btn.addEventListener("click", active);

function active() {
    btn.classList.toggle("is_active");
}

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。

avatar
文章
阅读
粉丝