bootstrap buttons CSS ;)

boootstrap-buttons.css

:root {
    --primary: 211, 100%;
    --primary-l: 50%;
    --secondary: 208, 7%;
    --secondary-l: 46%;
    --success: 134, 61%;
    --success-l: 41%;
    --info: 188, 78%;
    --info-l: 41%;
    --warning: 45, 100%;
    --warning: 51%;
    --danger: 354, 70%;
    --danger-l: 54%;
    --light: 210, 17%;
    --light-l: 98%;
    --dark: 210, 10%;
    --dark-l: 23%;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:focus, .btn:hover {
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background-color: hsl(var(--primary),var(--primary-l));
    border-color: hsl(var(--primary),var(--primary-l));
}

.btn-primary:hover {
    color: #fff;
    background-color: hsl(var(--primary),calc(var(--primary-l) - 10%));
    border-color: hsl(var(--primary),calc(var(--primary-l) - 10%));
}