CSS 使用HTML和CSS创建动画药丸形状按钮

药丸形状按钮是一个圆角吸引人的按钮。该按钮可以具有过渡效果和悬停效果，使其具有吸引力和平滑的体验。我们将使用CSS中的过渡效果来创建平滑的悬停效果。这种类型的按钮设计可用于各种用途，如注册表单、呼叫到行动按钮等。

作为另一种实现方法，一些开发人员可能选择使用JavaScript来创建动画按钮，这可以提供更高级的动画效果和交互功能。然而，这种方法可能需要额外的编程技能，也可能增加网站的加载时间。

步骤

为网页定义视口。
编写CSS代码来设计按钮。
为按钮定义一个class “button”来进行样式设计，并创建一个药丸形状的按钮。
将按钮的背景颜色设置为#ddd，边框设置为none，颜色设置为黑色，顶部和底部的padding设置为10px，左右设置为20px。
使用text-align属性将文本居中，删除文本下划线，并将按钮显示为内联块。
给按钮添加上下5px的外边距，左右3px的外边距。
添加一个20px的边框半径，使按钮呈现为药丸形状。
使用CSS中的:hover伪类为按钮添加悬停效果。
当用户悬停在按钮上时，将背景颜色更改为#f1f1f1，并添加一个持续时间为0.5秒的过渡效果。
添加一个带有文本”Pill Buttons”的h2标签。
使用button类创建两个按钮：Button 1和Button 2。

示例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*buttons are styled and a pill shape is created*/
.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;
}
/*Adding hover effect to the button*/
.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>