使用css和js给按钮添加微交互的几种方式
在现实世界中,当我们轻弹或按下某些东西时,它们会发出咔嗒声,例如电灯开关。有些东西会亮起或发出蜂鸣声,这些响应都是“微交互”,让我们知道我们何时成功完成了某件事。在本文中,我们将学习向网页按钮添加微交互的几种简单方法。
什么是微交互
微交互是用户界面上的小交互或动画。当用户执行操作时,它们向用户提供即时反馈。微交互可以保持用户的参与度并可以改善他们的整体体验。
微交互的一些示例包括我们与某人在线聊天时的打字指示器、下载的进度条以及刷新页面时的加载指示器。
按钮是网站上最常见的交互元素之一,它们可以执行一系列任务,例如切换、提交、删除、关闭、选择(通过单选按钮、选项按钮或选择菜单)等。
基本样式
<style>
* {
margin: 0;
padding: 0
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
有弹性的微交互
我们可以使用 CSS
的transform
属性创建一个 3D
按钮,单击它时该按钮会弹起。
<button class="btn"><span class="text">提交</span></button>
对于此示例,我们在<button>
中嵌套了一个<span>
. 通常,创建按钮时不需要这样做,但我们需要它来创建按钮的最终 3D
外观。
.btn {
position: relative;
background: #004958;
border-radius: 15px;
border: none;
cursor: pointer;
}
.text {
display: block;
padding: 15px 45px;
border-radius: 15px;
background: #00c2cb;
font-size: 1.5rem;
font-weight: 500;
color: #42455a;
transform: translateY(-6px);
transition: transform ease 0.1s;
}
.btn:active .text {
transform: translateY(-2px);
}
带边框动画的按钮
有多种方法可以为按钮的边框设置动画,因此我们将展示几个示例。
简单的边框微交互
让我们从简单的事情开始。通常,如果我们想向任何元素添加边框,我们会使用border
属性。但是在CSS
中,也有outline
属性,这俩非常相似。它在元素周围添加轮廓。轮廓会覆盖它们所应用的元素,这意味着它们是围绕边框绘制的。
它们甚至以相同的方式声明。以下是带有轮廓和边框的按钮示例:
button {
border: 3px solid cyan;
outline: 3px solid red;
}
下面的屏幕截图显示了它的样子:
轮廓不会影响主元素(在本例中为按钮)的尺寸,并且它们可以重叠其他内容或元素。我们还可以使用outline-offset
属性更改他们的位置。
正偏移值会将轮廓向外推,远离边框。负值将起到相反的作用。因此,例如,如果我们想隐藏轮廓,我们需要为其指定边框宽度的负值。这就是我们为按钮创建微交互的动画:
<button class="btn">提交</button>
button {
border: none;
position: relative;
padding: 15px 45px;
background: transparent;
border-radius: 10px;
border: 2px solid #00c2cb;
outline: 2px solid #00c2cb;
outline-offset: -2px;
font-size: 1.5rem;
color: #00c2cb;
font-weight: 500;
cursor: pointer;
transition: outline-offset 200ms ease;
}
button:hover {
outline-offset: 3px;
}
button:active{
transform: scale(0.95);
}
带有伪元素的按钮悬停效果
我们将使用::before
和::after
伪元素以及inset
属性来创建一些漂亮的边框动画。
我们将逐步设置我们的样式,先设置button
样式:
button {
position: relative;
background: transparent;
padding: 15px 45px;
border-radius: 15px;
border: none;
font-size: 1.5rem;
color: #e0ffff;
font-weight: 500;
cursor: pointer;
z-index: 1;
}
把insert
添加到::before该按钮的伪元素中。它的值为0px 50px
,因此它仅适用于 y
轴(inset
属性将元素水平和垂直地推离其父元素)
button::before {
content: '';
position: absolute;
inset: 0px 50px;
background: #42455a;
transition: inset 350ms ease;
z-index: -1;
}
::after
伪元素将覆盖::before
伪元素,留下一个inset
大小的间隙,从而创建一个边框。
button::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 10px;
background: #22232e;
z-index: -1;
}
为了获得最终的外观,我们将添加<button>
元素添加overflow: hidden
。这将删除方角并完成该按钮的微交互。
整体代码:
button {
position: relative;
overflow: hidden;
background: transparent;
padding: 15px 45px;
border-radius: 15px;
border: none;
font-size: 1.5rem;
color: #e0ffff;
font-weight: 500;
cursor: pointer;
z-index: 1;
}
button:active{
transform: scale(0.95);
}
button::before{
content: '';
position: absolute;
inset: -3px 50px;
background: #42455a;
transition: inset 350ms ease;
z-index: -2;
}
button:hover::before{
inset: -20px 0px;
background: #00c2cb;
}
button::after{
content: '';
position: absolute;
inset: 3px;
border-radius: 10px;
background: #22232e;
z-index: -1;
}
涟漪微交互
我们将在单击按钮时为其添加涟漪效果。它可以位于按钮内或按钮周围。
我们将使用一些 JavaScript
来创建这种微交互。设置按钮样式后的 JavaScript
代码如下:
let btn = document.querySelectorAll("button");
btn.forEach((btn) => {
btn.onclick = function (e) {
let x = e.pageX - e.target.offsetLeft;
let y = e.pageY - e.target.offsetTop;
let ripples = document.createElement("span");
ripples.style.left = x + "px";
ripples.style.top = y + "px";
this.appendChild(ripples);
setTimeout(() => {
ripples.remove();
}, 2000);
};
});
click
函数跟踪鼠标单击的 x
和 y
位置并创建一个新<span>
元素。每个都<span>
代表一个涟漪,之后使用setTimeout()
方法在两秒后将其删除。
我们使用 CSS
动画来更改其大小和不透明度。这将产生连锁反应。
button{
position: relative;
padding: 15px 45px;
font-size: 1.5rem;
border-radius: 15px;
border: none;
background: #00c2cb;
color: #22232e;
overflow: hidden;
cursor: pointer;
}
button span {
position: absolute;
background: #004958;
transform: translate(-50%,-50%);
pointer-events: none;
border-radius: 50%;
animation: ripple 2s linear infinite;
transition: 0.5s;
}
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 0.5;
}
100% {
width: 500px;
height: 500px;
opacity: 0;
}
}
发光
让按钮在悬停时发光。我们需要伪元素和box-shadow
属性的组合。
<button><span class="btn-text">Click me</span></button>
button {
display: flex;
justify-content: center;
align-items: center;
background: transparent;
position: relative;
background: #22232e;
border: none;
border-radius: 15px;
}
button .btn-text{
padding: 14px 45px;
font-size: 25px;
color: #e0ffff;
border: 2px solid rgba(255,255,255,0.1);
border-radius: 15px;
backdrop-filter: blur(15px);
background: rgba(0,73,88,0.05);
cursor: pointer;
z-index: 1;
transition: 0.2s;
}
此时,我们应该有一个看起来很普通的按钮。要在底部添加栏,我们将使用::before
伪元素:
button::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -5px;
width: 25%;
height: 10px;
background: #00c2cb;
border-radius: 10px;
transition: .5s;
box-shadow: 0 0 10px rgba(0,194,203,0.5);
}
添加box-shadow
了就有了发光效果。
为了完成这个微交互,我们将增加悬停时伪元素的大小
button:hover::before {
bottom: 0;
height: 40%;
width: 90%;
border-radius: 30px;
transition-delay: 0.5s;
}
整体代码:
button {
display: flex;
justify-content: center;
align-items: center;
background: transparent;
position: relative;
background: #22232e;
border: none;
border-radius: 15px;
}
button .btn-text{
padding: 14px 45px;
font-size: 25px;
color: #e0ffff;
border: 2px solid rgba(255,255,255,0.1);
border-radius: 15px;
backdrop-filter: blur(15px);
background: rgba(0,73,88,0.05);
cursor: pointer;
z-index: 1;
transition: 0.2s;
}
button::before{
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -5px;
width: 25%;
height: 10px;
background: #00c2cb;
border-radius: 10px;
transition: .5s;
box-shadow: 0 0 10px rgba(0,194,203,0.5);
}
button:hover::before{
bottom: 0;
height: 40%;
width: 90%;
border-radius: 30px;
transition-delay: 0.5s;
}