简单的 CSS 和 JavaScript 按钮微交互

995 阅读7分钟

在现实世界中,当我们轻弹或按下某些东西时,它们会发出咔嗒声,例如电灯开关。有些东西会亮起或发出蜂鸣声,例如 ATM 上的按钮。这些响应都是“微交互”,让我们知道我们何时成功完成了某件事。在本文中,我们将学习向网页按钮添加微交互的十种简单方法。

什么是微交互?

微交互是用户界面上的小交互或动画。当用户执行操作时,它们向用户提供即时反馈。微交互可以保持用户的参与度并可以改善他们的整体体验。

微交互的一些示例包括我们与某人在线聊天时的打字指示器、下载的进度条以及刷新页面时的加载指示器。

按钮是网站上最常见的交互元素之一,它们可以执行一系列任务,例如切换、提交、删除、关闭、选择(通过单选按钮、选项按钮或选择菜单)等。

有弹性的3D微交互

我们可以使用 CSStransform属性创建一个 3D 按钮,单击它时该按钮会弹起。在我们开始之前,下图显示了我们的目标。

这是该按钮的 HTML:

<body>
  <button class="btn"><span class="text">Click Me</span></button>
</body>

对于此示例,我们<span><button>. 通常,创建按钮时不需要这样做,但我们需要它来创建按钮的最终 3D 外观。

<button>类名为btn<span>保存“Click Me”文本的 的类名为text。这些元素将形成按钮的两个不同部分——顶部和侧面。

这是按钮的 CSS:

.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属性将文本向上移动。这将创建 3D 外观。

然后,我们将通过沿 y 轴垂直更改其平移值来设置此属性的动画,以在单击按钮时(即,当它处于 时)创建弹性效果:active

.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);
}

下面的 Pen 显示了实际效果。现在,当单击按钮时向上和向下移动时,用户可以获得视觉反馈。

为按钮添加点击声音

声音可以是微交互的一种形式,例如单击鼠标按钮时的声音。对于使用平板电脑和移动设备的用户来说,将声音与网页上的操作关联起来尤其有用。

首先,这是该按钮的 HTML:

<button>Click Me</button>

对于这个例子,样式并不重要。为了复制物理按钮点击的声音,我们需要一些 JavaScript。我们将创建一个Audio对象,并指定点击声的来源:

var mouseclick = new Audio();
mouseclick.src = "/click.wav";

当用户单击按钮时,将播放此声音。为此,我们将向onmousedown按钮添加一个事件:

<button onmousedown="mouseclick.play()">Click Me</button>

注意:我们不能命名音频对象click,因为它是保留字,不能用作变量名。

以下演示展示了我们的单击按钮的实际操作。

带边框动画的按钮

有多种方法可以为按钮的边框设置动画,因此我们将看几个示例。

简单的边框微交互

让我们从简单的事情开始。通常,如果我们想向任何元素添加边框,我们会使用该border属性。但是在CSS中,我们也有属性outline,这是非常相似的。它在元素周围添加轮廓。轮廓会覆盖它们所应用的元素,这意味着它们是围绕边框绘制的。

它们甚至以相同的方式声明。以下是带有轮廓和边框的按钮示例:

button {
  border: 3px solid cyan;
  outline: 3px solid red;
}

轮廓不会影响主元素(在本例中为按钮)的尺寸,并且它们可以重叠其他内容或元素。我们还可以使用该outline-offset属性更改他们的位置。

正偏移值会将轮廓向外推,远离边框。负值将起到相反的作用。因此,例如,如果我们想隐藏轮廓,我们需要为其指定边框宽度的负值。这就是我们为按钮创建微交互的动画:

button {
  border: 2px solid #00c2cb;
  outline: 2px solid #00c2cb;
  outline-offset: -2px;
  transition: outline-offset 200ms ease;
}

button:hover {
  outline-offset: 3px;
}

该按钮本质上是在萌芽第二个边框。它实现了简单的微交互。

带有伪元素的按钮悬停效果

现在让我们继续讨论更复杂的事情。我们将使用::before::after伪元素以及inset属性来创建一些漂亮的边框动画。 我们将逐步设置我们的样式,从 main 开始<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;
  overflow: hidden;
  z-index: 1;
}

inset属性将元素水平和垂直地推离其父元素:

button::before {
  content: '';
  position: absolute;
  inset: 0px 50px;
  background: #42455a;
  transition: inset 350ms ease;
  z-index: -1;
}

插图首先添加到::before该按钮的伪元素中。它的值为0px 50px,因此它仅适用于 y 轴。

接下来,我们添加::after伪元素:

button::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  background: #22232e;
  z-index: -1;
}

这个::after伪元素将覆盖::before伪元素,留下一个大小的间隙inset,从而创建一个边框。

为了获得最终的外观,我们将添加overflow: hidden到主要<button>元素。这将删除方角并完成该按钮的微交互。

圆形按钮上的边框动画

坚持上面使用的方法,我们可以在圆形按钮上创建边框动画。border-radius我们可以通过设置to50%并赋予其相同的高度和宽度来创建圆形按钮。对于此示例,我们将使用上一个按钮的大部分样式。

这是 CSS:

button {
  background: #42455a;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

button::before {
  content: '';
  position: absolute;
  inset: -1px 30px;
  background: #00c2cb;
  transition: 500ms;
  animation: rotate 4s linear infinite;
  z-index: -1;
}

button:hover::before {
  inset: -1px;
}

button::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #22232e;
  z-index: -1;
}

我们使用与前面的示例相同的效果,因此一旦我们将鼠标悬停在按钮上,边框就会变成蓝色。

此时,我们可以::before通过使用 CSS 动画旋转伪元素来进行轻微的变化:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

涟漪微交互

我们将在单击按钮时为其添加涟漪效果。它可以位于按钮内或按钮周围。

我们将使用一些 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); /*1000 = 1s*/
  };
});

click 函数跟踪鼠标单击的 x 和 y 位置并创建一个新<span>元素。每个都<span>代表一个涟漪,我们使用一种setTimeout()方法在两秒后将其消除。(查看setTimeout JavaScript 函数:带有示例的指南,了解有关 的更多信息setTimeout()。)

之后是CSS。我们正在设计波纹的样式,并使用 CSS 动画来更改其大小和不透明度。这将产生连锁反应。

这是该元素的 CSS <span>

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。 这是该按钮的 HTML:

<button><span class="btn-text">Click me</span></button>

这是 CSS:

button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
}

button .btn-text {
  padding: 14px 45px;
  font-size: 25px;
  color: #e0ffff;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  background: rgba(0,73,88,0.05);
  backdrop-filter: blur(15px);
  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了发光效果,backdrop-filter按钮上的文字很好地补充了发光效果。

为了完成这个微交互,我们将增加悬停时伪元素的大小:

button:hover::before {
  bottom: 0;
  height: 40%;
  width: 90%;
  border-radius: 30px;
  transition-delay: 0.5s;
}