[分享]css写一个好看的按钮

CSS写一个好看的按钮

.btn {
  display: inline-block;
  background-color: #555;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn:hover {
  background-color: #fff;
  color: #555;
  border: 2px solid #555;
} 

以上代码用于创建一个简单但好看的按钮。按钮具有以下特点：

• 使用display: inline-block让按钮不独占一行，方便嵌入文本之中。
• 使用background-color设置按钮的背景色。
• 使用color设置按钮的文字颜色。
• 使用padding设置按钮的内边距，增加按钮的可点击区域。
• 使用border-radius设置按钮的圆角角度，让按钮看起来更加圆润。
• 使用font-size设置按钮的文字大小。
• 使用text-align设置按钮内文字的对齐方式。
• 使用text-decoration: none去掉按钮文字的下划线。
• 使用transition: 0.3s ease添加按钮的过渡效果，使按钮在鼠标悬停时有渐变效果。
• 使用:hover伪类对鼠标悬停状态下的按钮进行特殊设置，包括修改背景色、文字颜色和边框。

通过CSS的上述设置，我们可以创建出简单且好看的按钮，让用户点击时更加愉悦。