CTA 按钮 CSS

如果你想让你的网站更具有吸引力，并且想增加用户的点击率，CTA 按钮就是你需要的。CTA（Call-to-Action）是诱导用户采取某种行动的指示，比如“购买”、“订阅”、“注册”等等。 CTA 按钮因其明显的实用性和效果而成为网站设计的重要组成部分。

在 CSS 中，可以通过以下步骤创建 CTA 按钮：

第 1 步：添加 HTML

首先，你要向你的 HTML 中添加一个按钮。你可以使用 <button> 或 <a> 元素，并声明一个类，如 .cta-button。

<button class="cta-button">Click me</button>

或者：

<a href="#" class="cta-button">Click me</a>

第 2 步：样式化按钮

接下来，你可以开始样式化按钮。 我们将创建一个具有扁平化设计风格的 CTA 按钮，并添加稍微的动画效果。

样式化按钮的外观

.cta-button {
  display: inline-block;
  border: none;
  background-color: #ffd829;
  color: #fff;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 50px;
  transition: background-color 0.5s;
}

上述代码设置 CTA 按钮的以下属性：

• display: inline-block: 让按钮显示为行内块元素，使其在页面中的位置更容易控制。
• border: none: 去除按钮的边框，使它看起来更加扁平化。
• background-color: #ffd829: 设置按钮的背景颜色，这里我们使用亮黄色。
• color: #fff: 设置字体的颜色为白色。
• padding: 15px 30px: 添加内边距来增加按钮的可点击面积。
• font-size: 18px: 设置字体大小为18px。
• font-weight: bold: 将字体加粗，使其更加突出。
• border-radius: 50px: 将边框半径设置为50px，使其看起来更加圆润。
• transition: background-color 0.5s: 添加平滑过渡，以使当鼠标指针悬停在按钮上时，背景色会从黄色变为橙色。

添加按钮动画效果

.cta-button:hover {
  background-color: #ffa500;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: none;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0px 0px 15px #ffa500;
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

这里我们添加了按钮的悬停效果，以使用户更容易注意到它。下面是代码的解释：

• .cta-button:hover: 目标选择器，当鼠标悬停在按钮上时，应用下面所定义的样式。

• background-color: #ffa500: 更改背景颜色为橙色，以使 CTA 按钮看起来更加生动。

• animation: pulse 1s infinite;: 为按钮添加动画。我们将使用 @keyframes 规则来定义动画。

• @keyframes pulse {...}: 定义动画的具体细节。在此代码段中，我们使用了 scale() 和 box-shadow 来改变按钮的大小和形状，以表示用户正在与它互动。

这就完成了 CTA 按钮的样式化过程。现在，当用户在网页上移动鼠标，这个动画按钮会引起他们的注意，促进他们完成订阅或购买等操作。

参考文献：

• CSS Button Styling Guide
• The science behind designing call to action buttons