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

Чтобы создать стильные кнопки на CSS, можно использовать различные подходы. Ниже приведу примеры нескольких способов, как создать кнопки с помощью CSS:

1. **Использование стилей для тега button**:

<button class="btn">Нажми меня</button>

.btn {
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.btn:hover {
  background-color: #2980b9;
}

2. **Использование стилей для тега a (ссылки)**:

<a href="#" class="btn">Нажми меня</a>

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2ecc71;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
}
.btn:hover {
  background-color: #27ae60;
}

3. **Использование стилей для элемента с классом**:

<span class="btn">Нажми меня</span>

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #e74c3c;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.btn:hover {
  background-color: #c0392b;
}

Это всего лишь базовые примеры создания кнопок на CSS. Вы можете изменять цвета, размеры, шрифты, тени и другие свойства, чтобы создать уникальные кнопки под ваши дизайнерские потребности. Кроме того, можно использовать градиенты, анимации, тени и другие эффекты для создания более креативных кнопок на CSS.