在线工具集
正在加载,请稍候…
正在加载,请稍候…
按钮样式生成器:调节背景色、文字色、圆角、内边距、字号、边框与阴影,实时预览效果并生成可直接使用的按钮 CSS,一键复制或下载。
默认比背景色深 12%,可调
.btn {
display: inline-block;
cursor: pointer;
border: none;
background: #4f46e5;
color: #ffffff;
border-radius: 8px;
padding: 10px 24px;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
box-shadow: 0 2px 8px rgba(79,70,229,0.35);
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
background: #4338ca;
box-shadow: 0 4px 12px rgba(79,70,229,0.35);
}