Я хочу создать простую кнопку для своей страницы, используя начальную загрузку, но без этой больной тени от: focus и: active
Я пытался! Важно, это работает, но я не хочу использовать ее для созданияПользовательская кнопка CSS
Я пытался охватить кнопки в классе, чтобы я мог использовать .class .btn-primary: active для примера, но все еще не работает
/* Buttons
---------- */
.btn {
font-size: 0.75rem;
padding: 0.75rem 1.75rem;
border-radius: 1.5rem;
text-transform: uppercase;
transition: border-radius 0.25s ease-in-out;
}
.btn:hover {
border-radius: 0.375rem;
}
.btn-primary {
background-color: #5D88EA;
border-color: transparent;
box-shadow: 0.375rem 0.375rem 1.25rem #5D88EA;
}
.btn-primary:hover {
background-color: #5D88EA;
border-color: transparent;
}
.btn-primary:active {
background-color: #5D88EA !important;
border-color: transparent !important;
}
.btn-primary:active, .btn-primary:focus {
box-shadow: 0.375rem 0.375rem 1.25rem #5D88EA !important;
}
.btn-outline-primary {
color: #5D88EA;
border-color: #5D88EA;
}
.btn-outline-primary:hover {
color: #5D88EA;
background-color: inherit;
border-color: inherit;
}
.btn-outline-primary:active {
color: #5D88EA !important;
background-color: inherit !important;
border-color: inherit !important;
}
.btn-outline-primary:active, .btn.btn-outline-primary:focus {
box-shadow: none !important;
}
Перед кнопками у меня было 0 ошибок и 0 предупреждений на CSS.Это то, что я сделал, могу я просто упростить это?Спасибо!