分享按钮设计这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战背景按钮是我们编程中使用频率最多的几个

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

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

背景

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

优秀的提交按钮特征

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

最终效果

分享按钮.gif

一、添加 iconfont 图标库

<link rel="stylesheet" href="https://at.alicdn.com/t/font_2778457_byl9we6lz8o.css?spm=a313x.7781069.1998910419.47&file=font_2778457_byl9we6lz8o.css">

二、添加 HTML 文件

<div class="btn_wrap">
    <span>Share</span>
    <div class="container">
        <i class="fax iconfont icon-weixin1"></i>
        <i class="fax iconfont icon-qq"></i>
        <i class="fax iconfont icon-xinxi"></i>
        <i class="fax iconfont icon-GitHub"></i>
    </div>
</div>

三、添加 CSS 文件

先初始化页面

设置 * 为 box-sizing: border-box
设置 body 来使整个项目居中

* {
    margin: 0;
    padding: 0;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background-color: #FEFEFE;
}

主要的 CSS 代码

设置 * 为 box-sizing: border-box
设置 html 和 body 来使整个项目居中
兼容 Chrome 、 Firefox 、IE、Opera 浏览器
- -moz- 代表 firefox 浏览器私有属性
- -ms- 代表 IE 浏览器私有属性
- -webkit- 代表 safari、chrome 私有属性
- -o- 代表 Opera

i {
    opacity: 0;
    font-size: 28px;
    color: #1F1E1E;
    will-change: transform;
    -webkit-transform: scale(.1);
    transform: scale(.1);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.btn_wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    width: 240px;
    height: 72px;
    background-color: #EEEEED;
    border-radius: 80px;
    padding: 0 18px;
    will-change: transform;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.btn_wrap:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

span {
    position: absolute;
    z-index: 99;
    width: 240px;
    height: 72px;
    border-radius: 80px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    text-align: center;
    line-height: 70px;
    letter-spacing: 2px;
    color: #EEEEED;
    background-color: #1F1E1E;
    padding: 0 18px;
    -webkit-transition: all 1.2s ease;
    transition: all 1.2s ease;
}

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 240px;
    height: 64px;
    border-radius: 80px;
}

.container i:nth-of-type(1) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
}

.container i:nth-of-type(2) {
    -webkit-transition-delay: .9s;
    transition-delay: .9s;
}

.container i:nth-of-type(3) {
    -webkit-transition-delay: .7s;
    transition-delay: .7s;
}

.container i:nth-of-type(4) {
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
}

.btn_wrap:hover span {
    -webkit-transition-delay: .25s;
    transition-delay: .25s;
    -webkit-transform: translateX(-280px);
    transform: translateX(-280px)
}

.btn_wrap:hover i {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


.dr {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 100px;
}
.fax{
    font-size: 24px;
}

❤️ 感谢大家

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

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

分享按钮设计

背景