Создаем круглую кнопку в Elementor
Кнопки часто используются на сайтах для поощрения пользователей совершать различные действия. Однако, стандартные прямоугольные кнопки в Elementor могут выглядеть устаревшими и не привлекать достаточно внимания. В этой статье я расскажу, как сделать круглую кнопку в Elementor, используя стандартный виджет “Кнопка” и небольшой код CSS.
Преимущества круглых кнопок
Первое преимущество круглых кнопок – это их эстетический вид. Круглая форма выглядит более современной и привлекательной, что может привести к большему количеству кликов. Кроме того, круглые кнопки занимают меньше места на странице, чем прямоугольные кнопки, что позволяет использовать их в более компактных местах.
Где использовать круглые кнопки
Круглые кнопки можно использовать во многих местах на вашем сайте, где требуется действие от пользователя. Например, они могут быть использованы для вызова диалогового окна, отправки формы, перехода на другую страницу или просто для визуальной привлекательности.
Как создать круглую кнопку в Elementor
- Добавьте на страницу стандартный виджет "Кнопка";
- В настройках виджета задайте необходимый текст, ссылку и другие параметры;
- В разделе "Стиль" — выберите "Скругление углов: 50%", далее "Отступ внутри: 50 px";
- Нажмите на вкладку "Дополнительно" и откройте меню "CSS" и вставьте готовый код.
selector a{
display: inline-flex;
}
selector .elementor-button-content-wrapper{
align-items: center;
}
selector a:before {
content: "";
display: block;
padding-top: 100%;
}
Образцы круглых кнопок
Прошу обратить внимание, что в примере данной статьи используются флекс-бокс контейнеры Elementor. Построение равно: основной контейнер, далее в основном контейнере расположены три контейнера в вертикальном направлении.
Использование круглых кнопок на вашем сайте может привести к более эффективному взаимодействию с пользователями и улучшению их опыта. Создание круглых кнопок в Elementor легко выполнить при помощи стандартного виджета “Кнопка” и небольшого CSS-кода. Пользуйтесь этим методом, чтобы добавить современный вид кнопкам на вашем сайте без необходимости устанавливать дополнительные плагины.
