如何使用 HTML 和 CSS 创建 Shaky 按钮？

如果你希望在你的网站上添加一些炫酷的按钮，那么 Shaky 按钮绝对是一个好的选择。Shaky 按钮在用户点击时会显示出一些动画效果，使得用户有更好的交互体验。在本文中，我们将会介绍如何使用 HTML 和 CSS 来创建一个 Shaky 按钮。

1. HTML 结构

首先，我们需要为 Shaky 按钮定义 HTML 结构。以下是一个基本的 HTML 模板：

<button class="shaky-button">点击我!</button>

我们需要在 button 标签中添加一个自定义的类名 shaky-button，以便之后的 CSS 样式能够应用到按钮上。

2. CSS 样式

接下来，我们需要为 Shaky 按钮添加一些 CSS 样式。以下是 Shaky 按钮的基本样式：

.shaky-button {
  position: relative;
  padding: 10px 20px;
  border-radius: 5px;
  border: 2px solid #000;
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

我们为按钮指定了一些基本的样式，如：背景色、边框、字体大小和按钮的圆角。此外，我们还添加了一个过渡效果，以便按钮在动画过程中更平滑。

以下是 Shaky 按钮的动画样式：

.shaky-button:hover::before,
.shaky-button:focus::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 5px;
  border: 2px solid #f00;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}

.shaky-button:hover::after,
.shaky-button:focus::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 5px;
  border: 2px solid #f00;
  z-index: -1;
  transition: all 0.3s ease-in-out;
  animation: shake 0.5s linear infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px) rotate(3deg);
  }
  30% {
    transform: translateX(5px) rotate(-3deg);
  }
  50% {
    transform: translateX(-2px) rotate(2deg);
  }
  60% {
    transform: translateX(2px) rotate(-2deg);
  }
  100% {
    transform: translateX(0);
  }
}

在这段 CSS 样式中，我们为按钮的 ::before 和 ::after 伪元素定义了样式。当鼠标悬停或按钮获取焦点时，Shaky 按钮的效果将被激活。

我们使用 border 属性定义了按钮的边框样式，同时为其添加了动画效果，使其在按钮上下晃动。

3. 效果展示

最后，我们来看一下 Shaky 按钮的运行效果：

点击我!

CSS 代码片段：

.shaky-button {
  position: relative;
  padding: 10px 20px;
  border-radius: 5px;
  border: 2px solid #000;
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.shaky-button:hover::before,
.shaky-button:focus::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 5px;
  border: 2px solid #f00;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}

.shaky-button:hover::after,
.shaky-button:focus::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 5px;
  border: 2px solid #f00;
  z-index: -1;
  transition: all 0.3s ease-in-out;
  animation: shake 0.5s linear infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px) rotate(3deg);
  }
  30% {
    transform: translateX(5px) rotate(-3deg);
  }
  50% {
    transform: translateX(-2px) rotate(2deg);
  }
  60% {
    transform: translateX(2px) rotate(-2deg);
  }
  100% {
    transform: translateX(0);
  }
}