Integrations

A small button, a short path to the lyceum.

Choose an official design and add it to your site.
The buttons contain no scripts, store no data and load nothing from the lyceum site until the link is followed.

Pill

A compact button for a menu or footer.

Ліцей №4

Open a separate preview

View HTML

Official button code

<!-- Офіційна кнопка Ліцею №4. Код і дизайн: © Сергій Рибак. Варіант pill-v1. Умови: https://www.lyceum4.vn.ua/umovy-vykorystannia/#integrations -->
<a href="https://www.lyceum4.vn.ua/" data-lyceum-button="pill-v1" style="display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;max-width:100%;font:600 16px/1.3 system-ui,sans-serif;text-decoration:none;background:#1c396e;color:#fff;border:2px solid #1c396e;border-radius:999px;padding:10px 18px"><svg width="26" height="32" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243 300">
  <rect width="243" height="300" fill="#f2f2f2"/>
  
  <path transform="translate(22.7 281.1) scale(0.1448 -0.1448)" d="M784 274H42V609L784 1491H1139V590H1323V274H1139V0H784ZM784 590V1051L392 590Z" fill="#1c396e"/>
  <g transform="translate(155.8 37.3) rotate(12) scale(1.27)">
    <path d="M0 -26 L66 2 L0 30 L-66 2 Z" fill="#1f2c45"/>
    <path d="M0 -20 L55 2 L0 24 L-55 2 Z" fill="#2c3d5e"/>
    <path d="M-38 14 L-38 38 C-22 54 22 54 38 38 L38 14 L0 30 Z" fill="#1f2c45"/>
    <path d="M0 2 L52 10 L52 50" fill="none" stroke="#f2b632" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M46 50 L58 50 L61 70 L43 70 Z" fill="#f2b632"/>
    <circle r="5" cy="2" fill="#f2b632"/>
  </g>
</svg>
<span>Ліцей №4</span></a>

Card

The lyceum name and city for a partners page.

Ліцей №4Могилів-Подільський

Open a separate preview

View HTML

Official button code

<!-- Офіційна кнопка Ліцею №4. Код і дизайн: © Сергій Рибак. Варіант card-v1. Умови: https://www.lyceum4.vn.ua/umovy-vykorystannia/#integrations -->
<a href="https://www.lyceum4.vn.ua/" data-lyceum-button="card-v1" style="display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;max-width:100%;font:600 16px/1.3 system-ui,sans-serif;text-decoration:none;background:#1c396e;color:#fff;border:2px solid #1062a3;border-radius:12px;padding:14px 20px"><svg width="26" height="32" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243 300">
  <rect width="243" height="300" fill="#f2f2f2"/>
  
  <path transform="translate(22.7 281.1) scale(0.1448 -0.1448)" d="M784 274H42V609L784 1491H1139V590H1323V274H1139V0H784ZM784 590V1051L392 590Z" fill="#1c396e"/>
  <g transform="translate(155.8 37.3) rotate(12) scale(1.27)">
    <path d="M0 -26 L66 2 L0 30 L-66 2 Z" fill="#1f2c45"/>
    <path d="M0 -20 L55 2 L0 24 L-55 2 Z" fill="#2c3d5e"/>
    <path d="M-38 14 L-38 38 C-22 54 22 54 38 38 L38 14 L0 30 Z" fill="#1f2c45"/>
    <path d="M0 2 L52 10 L52 50" fill="none" stroke="#f2b632" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M46 50 L58 50 L61 70 L43 70 Z" fill="#f2b632"/>
    <circle r="5" cy="2" fill="#f2b632"/>
  </g>
</svg>
<span>Ліцей №4<span style="display:block;font-size:12px;font-weight:400;margin-top:3px">Могилів-Подільський</span></span></a>

Outline

A light design for text pages.

Ліцей №4

Open a separate preview

View HTML

Official button code

<!-- Офіційна кнопка Ліцею №4. Код і дизайн: © Сергій Рибак. Варіант outline-v1. Умови: https://www.lyceum4.vn.ua/umovy-vykorystannia/#integrations -->
<a href="https://www.lyceum4.vn.ua/" data-lyceum-button="outline-v1" style="display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;max-width:100%;font:600 16px/1.3 system-ui,sans-serif;text-decoration:none;background:#fff;color:#1c396e;border:2px solid #1c396e;border-radius:8px;padding:8px 14px"><svg width="26" height="32" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243 300">
  <rect width="243" height="300" fill="#f2f2f2"/>
  
  <path transform="translate(22.7 281.1) scale(0.1448 -0.1448)" d="M784 274H42V609L784 1491H1139V590H1323V274H1139V0H784ZM784 590V1051L392 590Z" fill="#1c396e"/>
  <g transform="translate(155.8 37.3) rotate(12) scale(1.27)">
    <path d="M0 -26 L66 2 L0 30 L-66 2 Z" fill="#1f2c45"/>
    <path d="M0 -20 L55 2 L0 24 L-55 2 Z" fill="#2c3d5e"/>
    <path d="M-38 14 L-38 38 C-22 54 22 54 38 38 L38 14 L0 30 Z" fill="#1f2c45"/>
    <path d="M0 2 L52 10 L52 50" fill="none" stroke="#f2b632" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M46 50 L58 50 L61 70 L43 70 Z" fill="#f2b632"/>
    <circle r="5" cy="2" fill="#f2b632"/>
  </g>
</svg>
<span>Ліцей №4</span></a>

Keep the official appearance

These three designs may be embedded without changing their code, emblem, caption, destination or author credit in the comment. Do not change the destination, add tracking or present a modified version as official.

Place the button where it is not cropped and can be reached with a keyboard. If your editor removes SVG or comments, use an ordinary text link or seek approval for another design.

Ordinary text links to the site are allowed. This feature does not permit copying other protected site components. Detailed terms of use.