Loading…
Loading…
Design beautiful buttons with visual controls — export CSS, React JSX, or Tailwind classes.
.btn {
background-color: #6366f1;
color: #ffffff;
font-size: 16px;
font-weight: 600;
padding: 12px 24px;
border: none;
border-radius: 8px;
box-shadow: 0px 4px 14px 0px #6366f14d;
transition: all 200ms ease;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn:hover {
background-color: #4f46e5;
color: #ffffff;
box-shadow: 0px 6px 20px 0px #6366f166;
transform: scale(1.02) translateY(-1px);
}
.btn:active {
transform: scale(0.98) translateY(0px);
}
.btn:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 2px;
}