[分享]css中怎么添加按钮

在网站设计中，按钮是重要的设计元素之一，可以提升用户交互体验。而在CSS中添加按钮也是比较简单的，具体方法如下。首先，我们可以使用button元素来创建一个按钮，例如：点击这里 然后，在CSS样式表中...

在网站设计中，按钮是重要的设计元素之一，可以提升用户交互体验。而在CSS中添加按钮也是比较简单的，具体方法如下。
首先，我们可以使用button元素来创建一个按钮，例如：

<button>点击这里</button> 

然后，在CSS样式表中，使用以下样式来对按钮进行样式设置：

button {
  background-color: #4CAF50; /* 设置背景颜色 */
  border: none; /* 取消边框 */
  color: white; /* 设置文字颜色 */
  padding: 15px 32px; /* 设置内边距 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 取消下划线 */
  display: inline-block; /* 设置显示方式为行块状 */
  font-size: 16px; /* 设置字体大小 */
  margin: 4px 2px; /* 设置外边距 */
  cursor: pointer; /* 鼠标样式为手型 */
} 

以上样式设置了按钮的背景颜色、边框、文字颜色、内边距、文字对齐方式、文字下划线、显示方式、字体大小、外边距和鼠标样式等。
当然，我们也可以对以上样式进行相应的调整，以满足不同的设计需求。例如，我们可以添加hover伪类，当鼠标移动到按钮上时，改变按钮颜色：

button:hover {
  background-color: #008CBA; /* 悬停时设置背景颜色 */
  color: white; /* 悬停时设置文字颜色 */
} 

同样，我们也可以使用CSS类来为不同的按钮设置不同的样式，例如：

<button class="primary">主要按钮</button>
<button class="secondary">次要按钮</button> 

在CSS样式表中，则可以使用以下样式：

button.primary {
  background-color: #4CAF50; /* 设置主要按钮背景颜色 */
  color: white; /* 设置主要按钮文字颜色 */
}

button.secondary {
  background-color: #f44336; /* 设置次要按钮背景颜色 */
  color: white; /* 设置次要按钮文字颜色 */
} 

以上就是在CSS中添加按钮的简单介绍，在实际开发中，我们可以根据具体的设计需求选择不同的样式设置，以创造出更好的用户交互体验。