css 四个字的按钮图片

CSS 四个字按钮图片

.btn {
  width: 80px;
  height: 40px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  transition: all .2s;
}

.btn:hover {
  background-color: #333;
  color: #fff;
}

使用这段 CSS 代码可以生成一个简单的按钮，按钮上只有四个字，样式简洁美观。

首先定义一个名为 .btn 的类，设置按钮的基础属性，如宽高、边框、文本对齐方式、字体大小及颜色等。

.btn {
  width: 80px;
  height: 40px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  transition: all .2s;
}

然后为按钮设置悬停效果，使鼠标移动到按钮上时改变按钮的背景色和文本颜色。

.btn:hover {
  background-color: #333;
  color: #fff;
}

注意，按钮的悬停效果是利用 CSS 的 :hover 伪类实现的。

上面的代码可以自定义按钮的样式，比如可以更改宽度、高度、背景颜色等属性来满足不同的需求。

希望这个小小的代码片段能对初学者有所帮助，也欢迎大家交流分享有趣的 CSS 技巧。