创建完美的 CSS按钮
使用我们直观的工具自定义按钮样式,实时预览效果并获取可直接使用的CSS代码。
按钮设置
8px
预览和代码
.custom-button {
background-color: #165DFF;
color: #FFFFFF;
border-radius: 8px;
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 14px 0 rgba(22, 93, 255, 0.4);
}
.custom-button:hover {
background-color: #0E42D2;
transform: translateY(-2px);
box-shadow: 0 6px 18px 0 rgba(22, 93, 255, 0.5);
}
复制代码后,将其粘贴到您的CSS和HTML文件中使用。
常用按钮样式库
.btn-primary
.btn-secondary
.btn-outline
.btn-gray
.btn-success
.btn-danger
.btn-warning
.btn-purple