10个不同css按钮代码 |css attr 选择器

/* 1. 版式按钮 */
button {
font-size: 1.2rem;
color: #fff;
background-color: #007bff;
border: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
}
/* 2. 扁平按钮 */
button.flat {
font-size: 1.2rem;
color: #007bff;
background-color: transparent;
border: 2px solid #007bff;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
}
/* 3. 悬停按钮 */
button:hover {
color: #fff;
background-color: #0056b3;
}
/* 4. 阴影按钮 */
button.shadow {
font-size: 1.2rem;
color: #fff;
background-color: #007bff;
border: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
}
/* 5. 渐变按钮 */
button.gradient {
font-size: 1.2rem;
color: #fff;
background: linear-gradient(45deg, #007bff, #1d9bff);
border: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
}
/* 6. 3D按钮 */
button.three-d {
font-size: 1.2rem;
color: #fff;
background-color: #007bff;
border: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5), 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}
/* 7. 左边框按钮 */
button.border-left {
font-size: 1.2rem;
color: #007bff;
background-color: #fff;
border: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
border-left: 4px solid #007bff;
}
/* 8. 右边框按钮 */
button.border-right {
font-size: 1.2rem;
color: #007bff;
background-color: #fff;
border: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
border-right: 4px solid #007bff;
}
/* 9. 边框悬停按钮 */
button.border:hover {
color: #007bff;
background-color: #fff;
border: 2px solid #007bff;
}
/* 10. 图标按钮 */
button.icon {
font-size: 1.2rem;
color: #fff;
background-color: #007bff;
border: none;
padding: 0.5rem 1rem 0.5rem 2rem;
border-radius: 0.25rem;
background-image: url("icon.png");
background-repeat: no-repeat;
background-size: 1rem;
background-position-x: 1rem;
}

以上是10个不同的CSS按钮样式，可以根据具体需要选择合适的样式来使用。当然，也可以根据这些样式进行修改或者组合，创造出更多具有特色的按钮。