Виджет с кнопками и кнопки в редакторе контента

ПАРТНЕРЫ

HR-БЛОГ

ФУНКЦИОНАЛ

8 (800) 600-36-65

ЗАКАЗАТЬ ДЕМО

info@hrbox.io

Виджет с кнопками и кнопки в редакторе контента

Виджеты на главную страницу портала

В примерах ниже для оформления и цвета кнопки используются стили портала с небольшими изменениями.
Для цветов кнопки есть два варианта "Основной цвет" и "Акцент" которые устанавливаются в настройках портала /tenant/style
Высота кнопок задается параметром height. В примерах задано стандартное значение 86px, можно сделать меньше, но не менее 60px

Три кнопки без акцентного цвета


<style>
    /* Общие стили */
    .hr-index-extra-new {
        display: flex; /* Отображение элементов внутри контейнера в виде горизонтальной линии */
        justify-content: space-between; /* Равномерное распределение элементов по горизонтали */
        align-items: center; /* Выравнивание элементов по вертикали в центре */
        width: 100%; /* Ширина контейнера равна 100% родительского элемента */
        min-height: 60px !important;
    }

    .hrie-item-new {
        flex: 1; /* Занимает доступное пространство внутри контейнера */
        margin: 0 5px; /* Отступы по горизонтали между элементами */
        text-align: center; /* Выравнивание текста по центру */
        background-color: var(--accent)!important; /* Цвет фона с учетом переменной --accent */
        min-height: 60px !important;
        height: 60px;
    }

    .hrie-header_new {
        font-family: Lato, Helvetica Neue, Arial, Helvetica, sans-serif; /* Выбор шрифта */
        text-align: center; /* Выравнивание текста по центру */
        color: var(--accent-text) !important; /* Цвет текста с учетом переменной --accent-text */
        font-weight: bold; /* Жирное начертание текста */
        width: 100%; /* Ширина заголовка равна 100% родительского элемента */
        padding: 0 5px; /* Внутренние отступы сверху и снизу, а также по горизонтали */
        font-size: 20px; /* Размер шрифта */
        line-height: 28px; /* Межстрочное расстояние */
        overflow: hidden; /* Скрытие текста, выходящего за границы элемента */
        text-overflow: ellipsis; /* Замена выходящего текста многоточием */
        max-height: 100%; /* Максимальная высота элемента */
    }

    /* Медиа-запрос для узких экранов */
    @media (max-width: 799px) {
        .hr-index-extra-new {
            flex-direction: column; /* Располагаем элементы вертикально */
        }

        .hrie-item-new {
            flex: none; /* Отменяем занимание доступного пространства */
            width: 100%; /* Растягиваем элемент на всю ширину контейнера */
            margin: 5px 0; /* Добавляем отступы между элементами */
        }
    }
</style>


<div class="hr-index-extra hr-index-extra-new">
    <a class="hrie-item hrie-item-new hr-brand2" target="_blank" href="https://hrbox.io/manuals/all_instructions">
        <span class="hrie-header_new">Кнопка 1</span>
    </a>
    <a class="hrie-item hrie-item-new hr-brand2" target="_blank" href="https://hrbox.io/manuals/all_instructions">
        <span class="hrie-header_new">Кнопка 2</span>
    </a>
    <a class="hrie-item hrie-item-new hr-brand2" target="_blank" href="https://hrbox.io/manuals/all_instructions">
        <span class="hrie-header_new">Кнопка 3</span>
    </a>
</div>

Три кнопки, акцентный цвет в середине


<style>
    /* Общие стили */
    .hr-index-extra-new {
        display: flex; /* Отображение элементов внутри контейнера в виде горизонтальной линии */
        justify-content: space-between; /* Равномерное распределение элементов по горизонтали */
        align-items: center; /* Выравнивание элементов по вертикали в центре */
        width: 100%; /* Ширина контейнера равна 100% родительского элемента */
        min-height: 60px !important;
    }

    .hrie-item-new {
        flex: 1; /* Занимает доступное пространство внутри контейнера */
        margin: 0 5px; /* Отступы по горизонтали между элементами */
        text-align: center; /* Выравнивание текста по центру */
        background-color: var(--accent)!important; /* Цвет фона с учетом переменной --accent */
        min-height: 60px !important;
        height: 60px;
    }

    .hrie-header_new {
        font-family: Lato, Helvetica Neue, Arial, Helvetica, sans-serif; /* Выбор шрифта */
        text-align: center; /* Выравнивание текста по центру */
        color: var(--accent-text) !important; /* Цвет текста с учетом переменной --accent-text */
        font-weight: bold; /* Жирное начертание текста */
        width: 100%; /* Ширина заголовка равна 100% родительского элемента */
        padding: 0 5px; /* Внутренние отступы сверху и снизу, а также по горизонтали */
        font-size: 20px; /* Размер шрифта */
        line-height: 28px; /* Межстрочное расстояние */
        overflow: hidden; /* Скрытие текста, выходящего за границы элемента */
        text-overflow: ellipsis; /* Замена выходящего текста многоточием */
        max-height: 100%; /* Максимальная высота элемента */
    }

    /* Медиа-запрос для узких экранов */
    @media (max-width: 799px) {
        .hr-index-extra-new {
            flex-direction: column; /* Располагаем элементы вертикально */
        }

        .hrie-item-new {
            flex: none; /* Отменяем занимание доступного пространства */
            width: 100%; /* Растягиваем элемент на всю ширину контейнера */
            margin: 5px 0; /* Добавляем отступы между элементами */
        }
    }
</style>


<div class="hr-index-extra hr-index-extra-new">
    <a class="hrie-item hrie-item-new hr-brand2" target="_blank" href="https://hrbox.io/manuals/all_instructions">
        <span class="hrie-header_new">Кнопка 1</span>
    </a>
    <a class="hrie-item hrie-item-new" target="_blank" href="https://hrbox.io/manuals/all_instructions">
        <span class="hrie-header_new">Кнопка 2</span>
    </a>
    <a class="hrie-item hrie-item-new hr-brand2" target="_blank" href="https://hrbox.io/manuals/all_instructions">
        <span class="hrie-header_new">Кнопка 3</span>
    </a>
</div>

Пять кнопок, для примера


<style>
    /* Общие стили */
    .hr-index-extra-new {
        display: flex; /* Отображение элементов внутри контейнера в виде горизонтальной линии */
        justify-content: space-between; /* Равномерное распределение элементов по горизонтали */
        align-items: center; /* Выравнивание элементов по вертикали в центре */
        width: 100%; /* Ширина контейнера равна 100% родительского элемента */
        min-height: 60px !important;
    }

    .hrie-item-new {
        flex: 1; /* Занимает доступное пространство внутри контейнера */
        margin: 0 5px; /* Отступы по горизонтали между элементами */
        text-align: center; /* Выравнивание текста по центру */
        background-color: var(--accent)!important; /* Цвет фона с учетом переменной --accent */
        min-height: 60px !important;
        height: 60px;
    }

    .hrie-header_new {
        font-family: Lato, Helvetica Neue, Arial, Helvetica, sans-serif; /* Выбор шрифта */
        text-align: center; /* Выравнивание текста по центру */
        color: var(--accent-text) !important; /* Цвет текста с учетом переменной --accent-text */
        font-weight: bold; /* Жирное начертание текста */
        width: 100%; /* Ширина заголовка равна 100% родительского элемента */
        padding: 0 5px; /* Внутренние отступы сверху и снизу, а также по горизонтали */
        font-size: 20px; /* Размер шрифта */
        line-height: 28px; /* Межстрочное расстояние */
        overflow: hidden; /* Скрытие текста, выходящего за границы элемента */
        text-overflow: ellipsis; /* Замена выходящего текста многоточием */
        max-height: 100%; /* Максимальная высота элемента */
    }

    /* Медиа-запрос для узких экранов */
    @media (max-width: 799px) {
        .hr-index-extra-new {
            flex-direction: column; /* Располагаем элементы вертикально */
        }

        .hrie-item-new {
            flex: none; /* Отменяем занимание доступного пространства */
            width: 100%; /* Растягиваем элемент на всю ширину контейнера */
            margin: 5px 0; /* Добавляем отступы между элементами */
        }
    }
</style>


<div class="hr-index-extra hr-index-extra-new">
    <a class="hrie-item hrie-item-new hr-brand2" target="_blank" href="https://hrbox.io/manuals/all_instructions">
        <span class="hrie-header_new">Кнопка 1</span>
    </a>
    <a class="hrie-item hrie-item-new" target="_blank" href="https://hrbox.io/manuals/all_instructions">
        <span class="hrie-header_new">Кнопка 2</span>
    </a>
    <a class="hrie-item hrie-item-new" target="_blank" href="https://hrbox.io/manuals/all_instructions">
        <span class="hrie-header_new">Кнопка 3</span>
    </a>
    <a class="hrie-item hrie-item-new" target="_blank" href="https://hrbox.io/manuals/all_instructions">
        <span class="hrie-header_new">Кнопка 4</span>
    </a>
    <a class="hrie-item hrie-item-new hr-brand2" target="_blank" href="https://hrbox.io/manuals/all_instructions">
        <span class="hrie-header_new">Кнопка 5</span>
    </a>
</div>

Кнопки в редакторе контента

В примере ниже различные варианты кнопок. Кнопки без иконок, кнопки с иконками. А так же в последнем варианте кнопки с иконками у которых при отображении на мобильном устройстве будет пропадать текст и оставаться только иконка.
Расположение кнопок определяется параметром justify-content, основные значения left, right, center. В примерах используется center

Кнопки только с текстом. Цвет управляется классами accent, secondary, brand2, expensive


<style>
    /* Стиль для контейнера что бы кнопки центрировались на странице */
    .centered-container {
        display: flex;
        justify-content: center;
        gap: 3.5px;
        /* Горизонтальное центрирование */
    }
</style>

<div class="centered-container">
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui button accent">
        <span>Кнопка 1</span>
    </a>
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui button secondary">
        <span>Кнопка 2</span>
    </a>
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui button brand2">
        <span>Кнопка 3</span>
    </a>
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui button expensive">
        <span>Кнопка 4</span>
    </a>
</div>

Кнопки с иконками и текстом. Цвет так же управляется классами accent, secondary, brand2, expensive


<style>
    /* Стиль для контейнера что бы кнопки центрировались на странице */
    .centered-container {
        display: flex;
        justify-content: center;
        gap: 3.5px;
        /* Горизонтальное центрирование */
    }
</style>

<div class="centered-container">
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui icon button accent">
        <i class="fal fa-search"></i><span>Кнопка 1</span>
    </a>
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui icon button secondary">
        <i class="fal fa-scroll"></i><span>Кнопка 2</span>
    </a>
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui icon button brand2">
        <i class="fal fa-barcode"></i><span>Кнопка 3</span>
    </a>
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui icon button expensive">
        <i class="fal fa-chart-pie"></i><span>Кнопка 4</span>
    </a>
</div>

Иконки можно менять, для этого необходимо найти название и поменять его. Название иконки можно найти тут https://fontawesome.com/icons
Для этого находим нужную иконку, запоминаем называние класса и указываем его у какой либо кнопки. Различных иконок очень много, но на портале работают не все, каждую нужно проверить.

Такие кнопки на мобильном экране будут скрывать название, останется только иконка. Цвета кнопок и иконки - настраиваются как в предыдущих примерах


<style>
    /* Стиль для контейнера что бы кнопки центрировались на странице */
    .centered-container {
        display: flex;
        justify-content: center;
        gap: 3.5px;
        /* Горизонтальное центрирование */
    }
</style>

<div class="centered-container">
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui icon button accent">
        <i class="fal fa-search"></i><span class="mobile-hidden">Кнопка 1</span>
    </a>
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui icon button secondary">
        <i class="fal fa-dice"></i><span class="mobile-hidden">Кнопка 2</span>
    </a>
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui icon button brand2">
        <i class="fal fa-scroll"></i><span class="mobile-hidden">Кнопка 3</span>
    </a>
    <a href="https://hrbox.io/manuals/all_instructions" target="_blank" class="ui icon button expensive">
        <i class="fal fa-battery-bolt"></i><span class="mobile-hidden">Кнопка 4</span>
    </a>
</div>