这是我参与8月更文挑战的第24天,活动详情查看:8月更文挑战
作者:battleKing
仓库:Github、CodePen
博客:CSDN、掘金
反馈邮箱:myh19970701@foxmail.com
特别声明:原创不易,未经授权不得转载或抄袭,如需转载可联系笔者授权
背景
按钮
是我们 编程
中使用频率最多的几个 交互元素
之一,点击它会产生其描述的动作。如果一个按钮上写着 提交
,点击它很可能会 提交
一些东西。它也是任何数字产品中最重要的交互元素之一。现在 主流的按钮设计
是仍然是 扁平化
为主的设计的,再结合 色彩变化
、动画效果
去实现 点击反馈
。
优秀的提交按钮特征
功能突出
,一个按钮应该看起来像一个按钮,让用户一看就知道他的功能- 按钮与我们现实中的按钮越相似,效果越好。选择
矩形
、圆角矩形
总是最安全的选择
- 上下左右
居中对齐
- 左右两边的内部间距是垂直间距的两倍,对于提高可读性来说,这是一个
安全的比例选择
移动端
最小像素的按钮是50x50像素
左右,桌面端
最小像素的按钮是32x32像素
- 按钮内部为
图标
+文字
的效果要比单纯的文字提示
要好 圆角按钮
被认为比尖锐的
边缘更友好,- 如果您正在使用圆角按钮,请记住要与屏幕上的
其他元素
具有相同的圆角比例
最终效果
一、添加 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 文件
先初始化页面
- 设置
*
为box-sizing: border-box
- 设置
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");
}
❤️ 感谢大家
如果本文对你有帮助,就点个赞支持下吧,你的「赞」是我创作的动力。
如果你喜欢这篇文章的话,可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。