Interactive Preview
Hover over the button to see effects
Generated CSS
.custom-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
background-color: #3b82f6;
border: 0px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.custom-button:hover {
background-color: #2563eb;
}