Как сделать кнопку css?

Кнопка это не div с onclick, а тег button или a. Запомни это и жизнь станет проще.

| Свойство | Зачем | padding | воздух вокруг текста, без него кнопка похожа на огрызок border | по умолчанию уродский, убирай через border: none border-radius | скругление, 4-8px обычно хватает, не делай овал без нужды background-color | цвет фона, бери из палитры проекта а не с потолка color | текст должен быть читаемым на фоне, контраст решает cursor | pointer, палец вместо стрелки, мелочь а раздражает если забыть transition | 0.2s на background-color, наведение не должно быть рывком outline | не убирай совсем, замени на свой стиль для доступности

Отдельно про disabled. Кнопка с атрибутом disabled сама теряет курсор и кликабельность, css трогать не обязательно, но обычно ещё снижают opacity до 0.5 чтобы визуально было видно что жать бесполезно. Второй момент, hover и active состояния делай разными, иначе кажется что кнопка залипла. И да, div с ролью button это костыль, screen reader спасибо не скажет, юзай нормальный тег и не выпендривайся. Ещё лайфхак: если кнопка внутри формы и не должна её сабмитить, ставь type=button, иначе Enter где-нибудь неожиданно отправит форму и юзер не поймёт что случилось.