使用 HTML 和 CSS 创建动画胶囊形按钮

htmlcssweb developmentfront end technology更新于 2024/12/19 13:32:17

胶囊形按钮是一种圆角、外观美观的按钮。该按钮可以添加过渡效果和悬停效果，以提供美观流畅的体验。我们将使用 CSS 中的过渡效果来创建平滑的悬停效果。这种按钮设计可用于多种用途，例如注册表单、行动号召按钮等等。

作为替代实现方法，一些开发者可能会选择使用 JavaScript 创建动画按钮，从而提供更高级的动画效果和交互功能。但是，这种方法可能需要额外的编程技能，并且还会增加网站的加载时间。

算法

定义网页的视口。
编写 CSS 代码来设置按钮的样式。
定义一个"button"类来设置样式，并为按钮创建一个胶囊形状。
将按钮的背景颜色设置为 #ddd，边框设置为无，颜色设置为黑色，顶部和底部的内边距为 10px，左右两侧的内边距为 20px。
使用 text-align 属性将文本居中，移除文本装饰，并将按钮显示为内联块。
在顶部和底部添加 5px 的边距，在左右两侧添加 3px 的边距。按钮。
添加 20px 的边框半径，使按钮看起来像胶囊形状。
使用 CSS 中的 :hover 伪类为按钮添加悬停效果。
当用户将鼠标悬停在按钮上时，将背景颜色更改为 #f1f1f1，并添加持续时间为 0.5 秒的过渡效果。
添加一个 h2 标签，其中包含文本"胶囊按钮"。
使用按钮类创建两个按钮:按钮 1 和按钮 2。

示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*按钮被设计成胶囊形状并被创建*/
.button {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 5px 3px;
  border-radius: 20px;
}
/*为按钮添加悬停效果*/
.button:hover {
  background-color: #f1f1f1;
  transition-duration: 0.5s;
}
</style>
</head>
<body>

<h2>Pill Buttons</h2>
<!-- Define buttons with button class -->
<button class="button">Button 1</button>
<button class="button">Button 2</button>

</body>
</html>