[分享]css3按钮有几种

CSS3是一种强大的样式表语言，它允许开发人员创建各种各样的效果和样式。其中包括创建按钮效果。下面介绍几种常见的CSS3按钮样式。/基本按钮样式/ button { backgroundcolor: ...

CSS3是一种强大的样式表语言，它允许开发人员创建各种各样的效果和样式。其中包括创建按钮效果。下面介绍几种常见的CSS3按钮样式。

/*基本按钮样式*/
button {
  background-color: #4CAF50; /*绿色背景*/
  color: white; /*白色字体*/
  padding: 10px 20px; /*上下左右各10px*/
  border: none; /*无边框*/
}

/*圆角按钮样式*/
button.rounded {
  border-radius: 25px; /*圆角半径25px*/
}

/*边框按钮样式*/
button.outlined {
  border: 2px solid #4CAF50; /*绿色边框*/
  background-color: transparent; /*透明背景*/
  color: #4CAF50; /*绿色字体*/
}

/*二态按钮/鼠标悬停效果*/
button:hover {
  background-color: #3e8e41; /*绿色变暗*/
}

/*三态按钮/鼠标点击效果*/
button:active {
  background-color: #1e7d31; /*绿色变深*/
} 

以上是常见的CSS3按钮样式，开发人员可以根据需要进行自定义调整和扩展。