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

Для создания овальной кнопки в CSS можно использовать форму border-radius и псевдоэлемент ::before. Смотрите пример:

HTML:

<button class="oval-btn">Кнопка</button>

CSS:

.oval-btn {
  position: relative;
  display: inline-block;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-decoration: none;
  background-color: #6772e5;
  border-radius: 50px;
  overflow: hidden;
  z-index: 1;
}

.oval-btn::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -40%;
  width: 180%;
  height: 180%;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s ease-out;
  z-index: -1;
}

.oval-btn:hover::before {
  transform: scale(1);
}

Пояснение: кнопка .oval-btn стилизуется с использованием свойств position, display, padding, font-size, font-weight, color, text-align, text-decoration, background-color, border-radius, overflow и z-index для управления её внешним видом. Псевдоэлемент ::before создает овальный эффект на заднем плане кнопки. Свойство content: "" определяет содержимое псевдоэлемента. Свойства position: absolute, top: -25%, left: -40%, width: 180%, height: 180% и border-radius: 50% определяют размер и позицию псевдоэлемента. Свойство background-color: rgba(255, 255, 255, 0.05) задает цвет псевдоэлемента. Свойство transform: scale(0) задает начальный масштаб псевдоэлемента. Свойство transition: transform 0.3s ease-out задает плавное появление псевдоэлемента при наведении курсора на кнопку. Свойство z-index управляет порядком слоев элементов. В псевдоэлементе используется эффект transform: scale, чтобы при наведении курсора на кнопку псевдоэлемента масштабировался и выглядел как овал. Кнопка также может быть адаптивной вызывая @media запросы и менять свойства в зависимости от разрешения экрана.