入门 CSS 按钮类型

按钮类型简介

按钮是网页中常见的元素，可用于触发操作或链接到其他页面。CSS中提供了多种按钮类型，可以根据不同的需求选择使用。

常见的按钮类型包括：

• 普通按钮
• 圆角按钮
• 边框按钮
• 透明按钮
• 渐变按钮

普通按钮示例

<button class="btn">普通按钮</button>

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 0;
}

效果：

普通按钮

圆角按钮示例

<button class="btn btn-rounded">圆角按钮</button>

.btn-rounded {
  border-radius: 30px;
}

效果：

圆角按钮

边框按钮示例

<button class="btn btn-bordered">边框按钮</button>

.btn-bordered {
  border: 2px solid #007bff;
  background-color: transparent;
  color: #007bff;
}

效果：

边框按钮

透明按钮示例

<button class="btn btn-transparent">透明按钮</button>

.btn-transparent {
  background-color: transparent;
  color: #007bff;
}

效果：

透明按钮

渐变按钮示例

<button class="btn btn-gradient">渐变按钮</button>

.btn-gradient {
  background: linear-gradient(to right, #007bff, #00bfff);
  color: #fff;
}

效果：

渐变按钮

以上是几种常见的按钮类型示例，可以根据需求和自己的设计风格进行调整和修改，实现更多样化的按钮。