按钮的 10 个简单 CSS 和 JavaScript 微交互

在物理世界中，当我们轻弹或按下某些东西时，它们会发出咔哒声，例如电灯开关。有些东西会亮起或发出哔哔声，例如 ATM 上的按钮。这些回应都是"微互动"，让我们知道我们什么时候成功做了某事。在本文中，我们将学习为网页上的按钮添加微交互的十种简单方法。

该文转载自按钮的10个简单的CSS和JavaScript微交互 --- SitePoint

什么是微交互？

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

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

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

弹性3D微互动

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

下面是此按钮的 HTML：

xml 复制代码

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

在本例中，我们将一个元素嵌套在 .通常，在创建按钮时不需要这样做，但我们需要它来创建按钮的最终 3D 外观。<span>``<button>

的类名为，保存"单击我"文本的类名为。这些元素将形成按钮的两个不同部分------顶部和侧面。<button>``btn``<span>``text

下面是按钮的 CSS：

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

以下屏幕截图显示了此时的外观。

若要创建按钮的两侧，我们将使用该属性向上移动文本。这将创建 3D 外观。transform

然后，我们将通过沿 y 轴垂直更改其平移值来对此属性进行动画处理，以在单击按钮时（即，当它）：:active

css 复制代码

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

下面的笔显示了实际效果。用户现在会在单击按钮时上下移动时获得视觉反馈。

向按钮添加咔嗒声

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

首先，这是按钮的 HTML：

css 复制代码

<button>Click Me</button>

对于此示例，样式并不重要。为了复制物理按钮点击的声音，我们需要一些JavaScript。我们将创建一个对象，并指定咔嗒声的来源：Audio

ini 复制代码

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

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

ini 复制代码

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

注意：我们无法命名音频对象单击，因为它是保留字，不能用作变量名称。

以下 CodePen 演示显示了我们的点击按钮的实际效果。

带有边框动画的按钮

有几种方法可以对按钮的边框进行动画处理，因此我们将看几个示例。

简单的边框微交互

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

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

css 复制代码

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

下面的屏幕截图显示了它的外观。

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

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

css 复制代码

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

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

该按钮本质上是萌芽了第二个边框。它使简单的微交互成为可能。

下面的笔显示了此操作。

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

现在让我们继续讨论更复杂的事情。我们将使用 and 伪元素以及属性来创建一些漂亮的边框动画。::before``::after``inset

下图显示了我们通过此按钮微交互的目标。

我们将逐步设置样式，从主要：<button>

css 复制代码

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

css 复制代码

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

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

以下是按钮此时仅使用元素的外观：::before

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

css 复制代码

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

此伪元素将覆盖伪元素，留下大小的间隙，从而创建边框。::after``::before``inset

下图显示了将鼠标悬停在按钮上时按钮此时的外观。

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

以下笔提供了一个实时示例。

圆形按钮上的边框动画

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

这是 CSS：

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

以下屏幕截图显示了到目前为止的情况。

我们使用与上一个示例相同的效果，因此一旦我们将鼠标悬停在按钮上，边框将变为蓝色。

此时，我们可以通过使用CSS动画旋转伪元素来进行轻微的更改：::before

css 复制代码

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

涟漪微互动

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

我们将使用一些JavaScript来创建这种微交互。下面是设置按钮样式后的 JavaScript 代码：

ini 复制代码

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

单击函数跟踪鼠标单击的 x 和 y 位置并创建一个新元素。每个都代表一个涟漪，我们使用一种方法在两秒钟后将其删除。（查看 setTimeout JavaScript 函数：示例指南以获取更多信息。<span>``<span>``setTimeout()``setTimeout()

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

以下是该元素的 CSS：<span>

css 复制代码

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

以下 CodePen 演示显示了结果。

注意：在上面的CodePen演示中，溢出：隐藏被添加到主<按钮>元素中，以确保波纹不会扩展到按钮边界之外。

改变形状的微交互

一个按钮变成另一个形状将产生有趣的微交互。这可用于确认提交。

以下屏幕截图显示了我们的目标。

与往常一样，我们将从设置主要元素的样式开始。对于此示例，我们将从 Font Awesome 中添加一个复选图标：<button>

xml 复制代码

<button>
  Submit
  <i class="fa-solid fa-check"></i>
</button>

这是 CSS：

css 复制代码

button {
  position: relative;
  padding: 15px 45px;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  border-radius: 15px;
  border: 2px solid #00c2cb;
  background: none;
  color: #00c2cb;
  cursor: pointer;
  outline: none;
  transition: 200ms;
}

i {
  position: absolute;
  color: transparent; 
  transition: 200ms;
}

接下来，我们将按钮缩小为一个圆圈，将文本更改为复选图标，并添加旋转加载动画。所有这些都将通过单击按钮触发。

以下是用于更改按钮形状的 CSS：

css 复制代码

button:focus {
  color: transparent;
  outline: none;
  border: 2px solid transparent;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 25px 25px;
  border-left: 2px solid #00c2cb;
  animation: spin 2s 500ms forwards;
}

赋予按钮相同的高度和重量，并将其形状更改为圆形。该属性用于加载动画。border-radius: 50%``border-left

以下是创建旋转加载动画的方法。我们将使用该属性：@keyframes``transform

css 复制代码

@keyframes spin {
  80% {
    border: 2px solid transparent;
    border-left: 2px solid #00c2cb;
  }
  100% {
    transform: rotate(720deg);
    border: 2px solid #00c2cb;
  }
}

最后，复选图标将显示，但仅在旋转动画之后显示。这意味着会有延迟。我们可以使用 CSS 属性指定延迟，也可以通过在速记属性中添加第二个时间值来指定延迟。第一次将永远是动画持续时间：animation-delay``animation

css 复制代码

button:focus i {
  animation: check 300ms 2300ms forwards;
}

@keyframes check {
  to {
    color: #00c2cb;
  }
}

这是对这个按钮微交互的包装。我们可以调整延迟和持续时间，使所有内容与口味同步。

文本更改微交互

这是另一个适用于提交按钮的微交互。下面的屏幕截图显示了我们的目标。

我们从一个包含一些文本的常规按钮开始。当我们单击按钮时，我们将切换到加载动画，然后最终以新文本结束。

这是 HTML：

xml 复制代码

<button>
  <i class="fa-solid"></i>
  <span class="btn-text">Click Me</span>
</button>

嵌套在元素中的两个项目是加载图标和文本。这个特定的图标来自字体真棒：。如您所见，按钮中缺少一个类名：稍后将使用 JavaScript 添加它。<button>``<i class="fa-solid fa-circle-notch"></i>

以下是旋转加载动画的 CSS：

css 复制代码

.fa-circle-notch {
  animation: animate 1s ease infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(1turn);
  }
}

剩下的就是JavaScript函数：

ini 复制代码

btn = document.querySelector("button"),
icon = document.querySelector("i"),
btnText = document.querySelector(".btn-text");

btn.onclick = function () {
  btn.style.cursor = "wait";
  btnText.textContent = "";
  icon.classList.add("fa-circle-notch");

  setTimeout(() => {
    btn.style.pointerEvents = "none";
    btnText.textContent = "done";
    icon.style.display = "none";
  }, 3000);
}

我们首先定位主要元素 --- 、图标和文本。然后对于单击函数，我们更改光标样式，删除按钮文本，并为加载图标添加缺少的类名。最后，我们用于添加新的按钮文本并隐藏加载图标。<button>``setTimeout()

下面的 CodePen 演示显示了最终结果。

图标更改微交互

这种微交互非常适合切换按钮。我们将从一个简单的亮/暗切换开始，如下图所示。

下面是此按钮的 HTML：

ini 复制代码

<div class="toggle-btn">
  <div class="icon">
    <i class="fa-solid fa-moon"></i>
  </div>
</div>

这是 CSS：

css 复制代码

.toggle-btn {
  position: relative;
  height: 50px;
  width: 100px;
  background-color: #42455a;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.4s ease;
}

.toggle-btn .icon {
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  height: 60px;
  width: 60px;
  font-size: 30px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #42455a;
  border: 1px solid #999;
  border-radius: 50%;
  transition: all 0.4s ease;
}

这将创建切换按钮的初始状态。下一步是为其活动状态添加样式：

css 复制代码

.toggle-btn.active {
  background: #e0ffff;
}

.toggle-btn.active .icon {
  left: calc(100% - 59px);
  color: #e0ffff;
  border: 1px solid #e0ffff;
}

.toggle-btn.active .icon i {
  animation: spin 0.5s;
}

@keyframes spin {
  to {
    transform: rotate(0.5turn);
  }
}

我们将使用 JavaScript 控制上面的 CSS。我们将使用 JavaScript 来切换按钮，在此过程中更改图标：

dart 复制代码

const toggleBtn = document.querySelector(".toggle-btn"),
  lockIcon = document.querySelector(".icon i");

toggleBtn.addEventListener("click", () => {
  toggleBtn.classList.toggle("active");

  if(toggleBtn.classList.contains("active")) {
  lockIcon.classList.replace("fa-moon", "fa-sun");
  } else
 lockIcon.classList.replace("fa-sun", "fa-moon");
})

摇晃的图标微互动

使用，我们可以在单击或悬停在按钮上时使按钮图标摇晃。这非常适合订阅或通知按钮。transform: rotate()

以下是我们可以用来执行此操作的 CSS：

css 复制代码

button:hover i {
  animation: shake .2s ease-in-out .2s infinite alternate;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  90% {
    transform: rotate(-10deg) scale(1.2);
  }
  100% {
    transform: rotate(10deg) scale(1.2);
  }
}

这非常简单：我们将动画添加到按钮的 or 状态。然后，可以使用应用该属性。:hover``:focus``transform``@keyframes

下面的 CodePen 演示在实践中展示了这种效果。

抖动按钮微交互

我们可以每隔几秒钟对一个按钮进行动画处理，以便它提醒用户单击它。对于此示例，我们将在将鼠标悬停在按钮上或单击时停止/删除动画。

该属性可以暂停动画。另一种方法是简单地设置为：animation-play-state``animation``none

css 复制代码

button i {
  animation: shake 1s ease-in-out infinite alternate;
}

button:hover i {
  animation-play-state: paused;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  90% {
    transform: rotate(-10deg) scale(1.2);
  }
  100% {
    transform: rotate(10deg) scale(1.2);
  }
}

发光微互动

对于我们最后的按钮微交互，我们将在将鼠标悬停在按钮上时让按钮发光。我们需要伪元素和属性的组合。box-shadow

下图显示了我们的按钮的外观。

下面是此按钮的 HTML：

xml 复制代码

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

这是 CSS：

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

css 复制代码

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

为了完成此微交互，我们将在悬停时增加伪元素的大小：

css 复制代码

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

以下 CodePen 演示显示了此效果的实际效果。

结合按钮微交互

每个示例都很棒，但是我们可以将其中一些示例结合起来，以实现更多的微交互。例如，弹性按钮将与咔嗒声一起使用。声音可以与按钮的用途相匹配，例如通知铃。可以将摇晃动画添加到提交按钮，以指示操作被拒绝或无效。

微交互的好处

微互动不仅仅是花哨的小效果。它们在改善用户体验方面发挥着作用。微交互对您的网站有好处有几个原因。

正如我们在本文开头看到的，微交互提供了即时反馈。想象一下，单击提交按钮后什么也没发生：无法知道该操作是否成功。进行微互动将使您的网站更具吸引力。

除了按钮之外，如果您要过渡到新页面或开始下载，并且还有其他几种情况，如果没有微交互，您的网站会感到沉闷。查看视图转换 API 简介，了解如何为网站访问者提供微交互的现有新方法。

结论

我们已经研究了如何为按钮创建十个微交互。我们从3D弹性按钮开始，然后逐步添加声音和动画边框。我们还介绍了如何为按钮添加波纹点击效果，以及如何更改按钮中的形状、文本和图标。最后，我们在悬停时添加了发光效果。

保持简单很重要：每个微交互都必须有一个目的。正如我们所看到的，其中一些交互需要相当多的代码，因此最好谨慎使用它们。简单是最好的。

您可以尝试组合其中的一些来创建更多的微交互。