Documentation
Documentation - Buttons.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Buttons
Create elegant and interactive buttons with Marssel.
Basic button
A simple button with background and text
<button class="bg-[blue] c-[white] px-[1.5rem] py-[0.75rem] rounded-[10px]">
Click me
</button>Button variations
Different styles for different actions
<button class="bg-[0B63F3] c-[white] px-[20px] py-[10px] rounded-[8px] border-[none] cursor-[pointer] font-weight-[500]">
Primary
</button>
<button class="bg-[transparent] border-[2px_solid_0B63F3] c-[0B63F3] px-[20px] py-[10px] rounded-[8px] cursor-[pointer] font-weight-[500]">
Outline
</button>
<button class="bg-[10b981] c-[white] px-[20px] py-[10px] rounded-[8px] border-[none] cursor-[pointer] font-weight-[500]">
success
</button>
<button class="bg-[D41212] c-[white] px-[20px] py-[10px] rounded-[8px] border-[none] cursor-[pointer] font-weight-[500]">
Hazard
</button>Interactive buttons
With hover and click effects
<button class="bg-[0B63F3] bg-[2563eb]:hover c-[white] px-[20px] py-[10px] rounded-[8px] border-[none] cursor-[pointer] font-weight-[500] transition-[all_0.2s] transform-[scale(0.95)]:active">
Hover over me
</button>Different sizes
<button class="bg-[0B63F3] c-[white] px-[12px] py-[6px] rounded-[6px] border-[none] cursor-[pointer] font-size-[12px] font-weight-[500]">
Little
</button>
<button class="bg-[0B63F3] c-[white] px-[20px] py-[10px] rounded-[8px] border-[none] cursor-[pointer] font-size-[14px] font-weight-[500]">
Normal
</button>
<button class="bg-[0B63F3] c-[white] px-[28px] py-[14px] rounded-[10px] border-[none] cursor-[pointer] font-size-[16px] font-weight-[500]">
Big
</button>