DROPDOWNS

CLASS

Drop DownDrop Down Open

Label

Placeholder

Placeholder Placeholder2 Placeholder3

STATES

HoverSelected

Label

Placeholder

HTMLCSSJS

<a href="#" class="btn-sm ">Button</a>

<a href="#" class="btn-sm hover">Button</a>

<a href="#" class="btn-sm focus">Button</a>

<a href="#" class="btn-sm disabled">Button</a>

Label

Placeholder

HTMLCSSJS

<a href="#" class="btn-sm ">Selected</a>

<a href="#" class="btn-sm hover">Button</a>

<a href="#" class="btn-sm focus">Button</a>

<a href="#" class="btn-sm disabled">Button</a>

Label

Placeholder

Placeholder Placeholder2 Placeholder3

STATES

HoverSelected

Label

Placeholder

Placeholder Placeholder2 Placeholder3

HTMLCSSJS

<a href="#" class="btn-sm ">Button</a>

<a href="#" class="btn-sm hover">Button</a>

<a href="#" class="btn-sm focus">Button</a>

<a href="#" class="btn-sm disabled">Button</a>

.btn-sm{
    background-color: #247984;
    height: 40px;
    border-radius: 20px;
    padding: 0px 32px;
    color: white;
    line-height: 40px;
    width: fit-content;
}

.btn .hover{
    background: #0D5761;
}
.btn .focused{
    border-color: #0D5761;
    outline-color: #0D5761;
}
.btn .disabled{
    background: #c6c6c6;
}

Label

Placeholder

Placeholder Placeholder2 Placeholder3

HTMLCSSJS

<a href="#" class="btn-sm ">Selected</a>

<a href="#" class="btn-sm hover">Button</a>

<a href="#" class="btn-sm focus">Button</a>

<a href="#" class="btn-sm disabled">Button</a>

.btn-sm{
    background-color: #247984;
    height: 40px;
    border-radius: 20px;
    padding: 0px 32px;
    color: white;
    line-height: 40px;
    width: fit-content;
}

.btn .hover{
    background: #0D5761;
}
.btn .focused{
    border-color: #0D5761;
    outline-color: #0D5761;
}
.btn .disabled{
    background: #c6c6c6;
}