Buttons

Size

Large Button

HTML

<button class="_btn-lrg">Large Button</button>

CSS

._btn-lrg {
    height: 48px;
    border-radius: 2px;
    cursor: pointer;
    padding: 8px 30px;
    font-size: 14px;
    border: 1px solid inherit;  
    display: flex;
    align-items: center;
}

Use Case

Main site, CTAs, Most important things

Medium Button

Medium Button

HTML

<button class="_btn-md">Medium Button</button>

CSS

._btn-md {
    height: 40px;
    border-radius: 2px;
    cursor: pointer;
    padding: 8px 20px;
    font-size: 14px;
    border: 1px solid inherit;  
    display: flex;
    align-items: center;
}

Use Case

Middle weight things

:::

Small Button

Small Button

HTML

<button class="_btn-sm">Small Button</button>

CSS

._btn-sm {
    height: 32px;
    border-radius: 2px;
    cursor: pointer;
    padding: 6px 16px;
    font-size: 14px;
    border: 1px solid inherit;  
    display: flex;
    align-items: center;
}

Use Case

Light weight things

Question

Anything need to be added here?!

Share your feedback

Heirarchy

Primary

Fill the background using the css class of

._primary

Secondary

Add a border of X with the bg of color of ?

._secondary

Tertiary

a third one?!

Question

Should there be any button hieararchies?! If so, how many, styling, and use cases?

Share your feedback