[分享]css中按钮的代码怎么写

CSS中的按钮，是网页设计中不可缺少的一部分。按钮可以帮助用户操作网页，提供更好的用户体验。下面我将简要介绍一下如何编写CSS中的按钮。 首先，在HTML中创建一个button元素： 按钮接下来，在C...

CSS中的按钮，是网页设计中不可缺少的一部分。按钮可以帮助用户操作网页，提供更好的用户体验。下面我将简要介绍一下如何编写CSS中的按钮。 首先，在HTML中创建一个button元素：

<button>按钮</button>

接下来，在CSS中，我们需要声明一些属性来设置按钮的样式。比如设置背景颜色，字体大小，边框等：

button {
  background-color: #337ab7;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
}

上述代码中，我们设置了按钮的背景颜色为深蓝色，字体颜色为白色，字体大小为16px，去掉了边框线，并设置了边框的圆角为4px，给按钮添加了padding。 如果我们想为按钮添加一个hover效果，当用户将鼠标悬停在按钮上时，背景色会变成浅蓝色，可以使用CSS伪类:hover ：

button:hover {
  background-color: #5bc0de;
}

完整代码如下：

<button>按钮</button>

button {
  background-color: #337ab7;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
}

button:hover {
  background-color: #5bc0de;
}

通过上述代码，我们创建了一个带有hover效果的按钮。在实际开发中，可以根据需求设置更多样式属性，如字体颜色、边框颜色、阴影等等，来打造独特的按钮风格。