按钮提交动画

1,313 阅读3分钟

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

作者:battleKing
仓库:GithubCodePen
博客: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");
}

❤️ 感谢大家

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

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