proklim/public/layout_home/assets/css/button.css

89 lines
1.9 KiB
CSS

.btn {
margin: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
border: none;
font-weight: 600;
cursor: pointer;
}
.btn kbd {
margin: 0.25rem;
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
}
.btn-primary {
background: linear-gradient(#1f5afe, #0f4cf5);
color: white;
box-shadow: inset 0pt 4pt 3pt -2pt #386fff, 0pt 4pt 5pt -3pt #0009;
border-bottom: 2pt solid #083acd;
transition: all 0.5s ease;
}
.btn-primary:hover {
border-bottom: 4pt solid #083acd;
translate: 0pt -1pt;
}
.btn-primary:active {
box-shadow: inset 0pt 4pt 3pt -2pt #386fff, 0pt 4pt 5pt -3pt #0000;
border-bottom: 1pt solid #083acd;
translate: 0pt 0pt;
}
.btn-primary kbd {
background-color: #3e6eff;
box-shadow: inset 0pt -3pt 3pt -2pt #1f54f0, inset 0pt 3pt 3pt -2pt #658dff,
0pt 2pt 2pt -2pt #0005, 0pt 0pt 0pt 2pt #0d47f0;
}
.btn-base {
background: #386fff;
}
.btn {
margin: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
border: none;
font-weight: 600;
cursor: pointer;
}
.btn kbd {
margin: 0.25rem;
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
}
.btn-red {
background: linear-gradient(#cc050f, #cc050f);
color: white;
box-shadow: inset 0pt 4pt 3pt -2pt #cc050f, 0pt 4pt 5pt -3pt #0009;
border-bottom: 2pt solid #cc050f;
transition: all 0.5s ease;
}
.btn-red:hover {
border-bottom: 4pt solid #7b0509;
translate: 0pt -1pt;
}
.btn-red:active {
box-shadow: inset 0pt 4pt 3pt -2pt #cc050f, 0pt 4pt 5pt -3pt #0000;
border-bottom: 1pt solid #cc050f;
translate: 0pt 0pt;
}
.btn-red kbd {
background-color: #cc050f;
box-shadow: inset 0pt -3pt 3pt -2pt #cc050f, inset 0pt 3pt 3pt -2pt #310d0f,
0pt 2pt 2pt -2pt #0005, 0pt 0pt 0pt 2pt #cc050f;
}
.btn-base {
background: #cc050f;
}