基础 CSS 按钮清除样式

在开发网站或应用程序时，常常需要创建自定义按钮。然而，浏览器默认的样式可能与你想要的外观不同，因此需要清除按钮的默认样式。

以下是一个简单的CSS代码片段，可以用于清除按钮的默认样式：

button {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

这个代码将删除按钮的填充、边框和背景色。它还将继承按钮的字体和鼠标指针样式，以及Button元素的轮廓。

请注意，此样式适用于所有类型的Button元素，包括输入类型为“button”和“submit”的元素。

你可以根据需要添加其他样式属性，例如文本样式和背景颜色，以创建自定义按钮。

这是一个示例代码片段，用于创建一个自定义按钮：

button.custom {
  font-size: 1rem;
  color: #fff;
  background-color: #007bff;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease;
}

button.custom:hover {
  background-color: #0056b3;
}

这个代码创建一个蓝色的按钮，当悬停在按钮上时会变成深蓝色。你可以根据需要调整这些样式属性，以创建符合你需求的自定义按钮。

最后，记住在样式表中使用注释，以便在以后修改时可以理解代码。以下是一个示例样式表，包括按钮清除样式和自定义按钮样式的注释：

/* 清除按钮默认样式 */
button {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

/* 自定义按钮样式 */
button.custom {
  font-size: 1rem;        /* 设置字体大小 */
  color: #fff;            /* 设置字体颜色 */
  background-color: #007bff;  /* 设置背景颜色 */
  border-radius: 6px;     /* 设置圆角 */
  padding: 0.5rem 1rem;   /* 设置填充 */
  transition: background-color 0.3s ease;   /* 设置过渡 */
}

/* 鼠标悬停时的自定义按钮样式 */
button.custom:hover {
  background-color: #0056b3;  /* 更改背景颜色 */
}

在使用此代码片段时，请根据你的需求更改样式属性，并根据需要添加更多样式属性。