圆形按钮 CSS

圆形按钮常用于网页设计，可以起到吸引用户注意力的作用。本文将介绍如何使用 CSS 创建圆形按钮。

HTML 代码

首先，我们需要在网页中添加一个按钮。可以使用以下 HTML 代码：

<button class="circle-button">button</button>

CSS 代码

接下来，我们需要添加 CSS 样式来将按钮变成圆形。

.circle-button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 50%;
  background-color: #4caf50;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

分析一下上面代码的含义：

• display: inline-block; 使按钮内联显示；
• padding: 10px 20px; 设置按钮内边距；
• border-radius: 50%; 设置按钮的圆角半径，使其变成圆形；
• background-color: #4caf50; 设置按钮的背景颜色；
• color: #fff; 设置按钮的文字颜色；
• text-align: center; 设置按钮内部的文字居中；
• text-decoration: none; 去掉按钮的下划线样式。

效果展示

添加上述代码后，我们得到一个简单的圆形按钮：

button

自定义样式

如果需要自定义按钮的样式，可以修改上述代码中的各种 CSS 属性。

例如，要更改按钮的尺寸，可以将 padding 属性的值改为不同的像素值。

.circle-button {
  display: inline-block;
  padding: 20px 40px;
  border-radius: 50%;
  background-color: #4caf50;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

button

如果要更改按钮的颜色，可以修改 background-color 和 color 属性。

.circle-button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 50%;
  background-color: #f44336;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

button

总结

本文介绍了如何使用 CSS 创建圆形按钮。通过自定义 CSS 属性，可以自由更改按钮的样式，实现不同的效果。