Кнопки

<!-- Primary — форм-кнопка «Запишите меня!» -->
<button class="bb-btn bb-btn-lg bb-btn-primary">Запишите меня!</button>

<!-- Outline — appointment «Записаться на прием» -->
<a class="bb-btn bb-btn-md bb-btn-outline" href="#form">Записаться на прием</a>

<!-- Teal — «Позвонить» -->
<a class="bb-btn bb-btn-md bb-btn-teal" href="tel:+73422250662">Позвонить</a>

<!-- Pill — «Заказать звонок» -->
<a class="bb-btn bb-btn-md bb-btn-pill" href="#callback">Заказать звонок</a>

import { Button } from "@/components/ui/Button";

// Форм-кнопка (главный CTA)
<Button variant="primary" size="lg">Запишите меня!</Button>

// Запись из хедера / навигации
<Button variant="outline" size="md">Записаться на прием</Button>

// Звонок
<Button variant="teal" size="md">Позвонить</Button>

// Заказать звонок (открывает модал)
<Button variant="pill" size="md">Заказать звонок</Button>

// С loading-состоянием
<Button variant="primary" size="lg" loading>Отправляем...</Button>

/* Точный CSS с сайта oclinica.ru (style.css) */

/* Форм-кнопка — кнопка отправки форм записи */
#block-entityform-block-feedback button,
#block-entityform-block-lor-form button {
  background: #FFA39C;
  color: white;
  font-weight: bold;
  border: solid 1px #FF847B;
  width: 300px;
  height: 42px;
  font-size: 18px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5), 0px 4px 5px rgba(0,0,0,0.3);
}

/* Кнопка «Записаться на прием» в хедере */
#block-block-15 .appointment {
  background: #FFF;
  border: #BF9975 solid 1px;
  color: #BF9975;
  font-size: 14px;
  line-height: 38px;
  padding: 3px 12px;
  border-radius: 7px;
}

/* Кнопка «Позвонить» */
.show-phone {
  background: rgb(96, 149, 156); /* #60959c */
  color: #fff;
  border-radius: 7px;
  font-size: 14px;
  line-height: 38px;
  padding: 3px 12px;
}

/* Кнопка «Заказать звонок» */
a.callback_url {
  background: #e9e4d4;
  border: #d5cfbd solid 1px;
  color: #000;
  border-radius: 25px;
  font-size: 16px;
  padding: 6px 18px;
}