主流的3D按钮效果

YiHangMa
1,499 阅读3分钟

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

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

背景

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

优秀的按钮特征

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

最终效果

3D按钮.gif

一、添加 HTML 文件

  1. HTML部分很简单，只要添加一个类名为 learn-more 的 <button></button>
<button class="learn-more">Learn More</button>

二、添加 CSS 文件

先初始化页面

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

*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: "Rubik", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    background: #fff;
}

主要的 CSS 代码

button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
}

button.learn-more {
    font-weight: 600;
    color: #382b22;
    text-transform: uppercase;
    padding: 1.25em 2em;
    background: #fff0f0;
    border: 2px solid #b18597;
    border-radius: 0.75em;
    transform-style: preserve-3d;
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}

button.learn-more::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f9c4d2;
    border-radius: inherit;
    box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
    transform: translate3d(0, 0.75em, -1em);
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}

button.learn-more:hover {
    background: #ffe9e9;
    transform: translate(0, 0.25em);
}

button.learn-more:hover::before {
    box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
    transform: translate3d(0, 0.5em, -1em);
}

button.learn-more:active {
    background: #ffe9e9;
    transform: translate(0em, 0.75em);
}

button.learn-more:active::before {
    box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
    transform: translate3d(0, 0, -1em);
}

❤️ 感谢大家

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

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

avatar
文章
阅读
粉丝