Professional button designer with AI-powered tools - 100% in your browser. No Data Uploads No Subscriptions No Limits
Select an animation to preview it on your button
.custom-btn {
display: inline-block;
background: #2c76ff;
color: #ffffff;
padding: 18px 40px;
border-radius: 12px;
border: none;
cursor: pointer;
font-size: 18px;
font-weight: 600;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.custom-btn:hover {
background: #1a5bcc;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}
.custom-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.custom-btn:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(44, 118, 255, 0.4);
}
.custom-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}