.button { background: none; border: none; color: var(--secoundary); border-radius: 5px; padding: 7px 14px; cursor: pointer; transition: .3s; font-size: 0.875rem; } .button:hover { filter: opacity(.80); } .button.button-primary { background-color: var(--primary); color: var(--white); } .button.button-success { background-color: var(--success); color: var(--white); } .button.button-warning { background-color: var(--warning); color: var(--white); } .button.button-danger { background-color: var(--red); color: var(--white); } .button.button-secondary { background-color: var(--secondary); color: var(--white); } .button.button-xs { font-size: 0.75rem; line-height: 1rem; } .button.button-sm { font-size: 0.875rem; line-height: 1.25rem; padding: 7px 14px; } .button.button-lg { font-size: 1.125rem; line-height: 1.75rem; } .button.button-xl { font-size: 1.25rem; line-height: 1.75rem; }