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按钮样式,开发人员可以根据需要进行自定义调整和扩展。