更改按钮形状 CSS

更改按钮形状是网页设计中常见的操作，在CSS中实现也非常简单。本文将介绍如何通过CSS来更改按钮的形状。

圆形按钮

要创建圆形按钮，需要通过CSS来设置按钮的padding值，并将border-radius属性设置为50%。

.btn-circle {
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 10px;
  background-color: #007bff;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

在上面的代码中，我们将圆形按钮的宽和高设置为40像素，并将padding设置为10像素。我们还设置了背景颜色和文字颜色，以增强按钮的可视性。

圆角按钮

要创建圆角按钮，需要使用border-radius属性来设置按钮的边角的圆角程度。以下是创建圆角按钮的示例代码：

.btn-rounded {
  display: inline-block;
  padding: 10px 16px;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 20px;
}

在上面的代码中，我们使用border-radius属性来设置按钮的圆角程度为20像素。此外，我们还设置了按钮的常见CSS属性，例如背景颜色、文字颜色和文字对齐方式。

方形按钮

如果您想创建方形按钮，只需将border-radius属性设置为0即可。以下是创建方形按钮的代码：

.btn-square {
  display: inline-block;
  padding: 10px 16px;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 0;
}

在上面的代码中，我们将按钮的border-radius属性设置为0，这样它就成为一个正方形。

总之，在CSS中更改按钮形状非常简单，您只需要使用border-radius属性就能轻松实现各种不同的按钮形状。