buttons.css

TLDR

The buttons.css file contains CSS code for styling buttons. It includes classes for different button sizes and styles, such as rounded buttons, extra small buttons, and buttons with specific colors.

.btn {
    transition: var(--transition-btn);
    font-family: var(--firaMono);
    cursor: pointer;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 50px;
    height: 40px;
}

.btn-rounded {
    border-radius: 12px;
}

.btn.btn-xs {
    padding: .8em 2em;
}

.btn .fa {
    margin-left: 5px;
}

.btn-full {
    width: 100%;
    height: 100%;
}

.btn-white {
    background: #fff;
    color: #186CDA;
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active {
    background: rgba(255, 255, 255, 0.9);
}

.btn-xl {
    font-size: 18px;
    padding: 0 36px;
    height: 64px;
}

.btn-lg {
    height: 52px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 600;
}

.btn-primary {
    border: none;
    background-color: var(--denimBtn);
}

.btn-tertiary {
    background: rgba(var(--denimBtnRgb), 0.08);
    color: #1C58D9;
}

.btn-tertiary:hover {
    background: rgba(var(--denimBtnRgb), 0.12);
}

.btn-tertiary:active {
    background: rgba(var(--denimBtnRgb), 0.16);
}

.btn-yellow {
    background-color: rgb(var(--yellow));
    border-radius: 12px;
}