У деяких SaaS сервісах (наприклад, JIMDO) є віджет із різними зображеннями кнопки. У сервісі BLOGGER передбачається організація посилання прямо за текстом чи простими засобами html розмітки.
Давайте розглянемо, як зробити просту кнопку на веб-сайті.
Зробити її можна двома способами. Перший - це за допомогою тега <button> з подією onclick.
Другий – за допомогою CSS коду. Другий спосіб зручний, коли треба зробити багато однакових за дизайном кнопок на одній сторінці або на всьому сайті. Все залежить від того, де Ви розмістите CSS код.
Давайте розглянемо, як зробити просту кнопку на веб-сайті.
Зробити її можна двома способами. Перший - це за допомогою тега <button> з подією onclick.
Другий – за допомогою CSS коду. Другий спосіб зручний, коли треба зробити багато однакових за дизайном кнопок на одній сторінці або на всьому сайті. Все залежить від того, де Ви розмістите CSS код.
Зображення кнопки що реагує на курсор реалізується тегом <button>, тобто код такий <button>КНОПКА</button> .
Виглядає кнопка так
Але це тільки малюнок кнопки. Для того, щоб кнопка виконувала дію, треба додати подію onclick для переходу за гіперпосиланням.
html-код для простої кнопки з параметрами за замовчуванням та переходом на сайт КПІ у новому вікні:
<button onclick="window.open('http://kpi.ua')">кнопка з переходом на нове вікно</button>
<button onclick="window.location.href=('http://www.kpi.ua')"><span style="padding: auto;"><span style="color: blue;"><span style="font-size: 14pt;">Кнопка без переходу на нове вікно</span></span></span></button>
Міняти написи на кнопках можна просто в режимі верстки.
<button onclick="window.open('http://kpi.ua')">кнопка з переходом на нове вікно</button>
Виглядає та працює кнопка так:
Проста кнопка з переходом на нове вікно з додатковими параметрами тексту. Ширина і довжина кнопки визначається довжиною тексту на ній та розміром шрифту.
<button onclick="window.open('http://kpi.ua')"><span style="color: blue;"><span style="font-size: 14pt;">Кнопка з переходом на нове вікно</span></span></button>
Виглядає та працює так:
<button onclick="window.open('http://kpi.ua')"><span style="color: blue;"><span style="font-size: 14pt;">Кнопка з переходом на нове вікно</span></span></button>
Виглядає та працює так:
Проста кнопка із додатковими параметрами тексту без переходу на нове вікно
<button onclick="window.location.href=('http://www.kpi.ua')"><span style="padding: auto;"><span style="color: blue;"><span style="font-size: 14pt;">Кнопка без переходу на нове вікно</span></span></span></button>
Виглядає та працює так:
Міняти написи на кнопках можна просто в режимі верстки.
2. Створюємо кнопку за допомогою CSS коду.
Спочатку створіть html посилання: <a href="адреса посилання"> текст посилання </a> , а потім надайте посиланню атрибут 'class', з назвою кнопки таким чином: class = "knopka". Тоді CSS код буде адресуватися до будь-якого посилання з назвою "knopka".
Спочатку створіть html посилання: <a href="адреса посилання"> текст посилання </a> , а потім надайте посиланню атрибут 'class', з назвою кнопки таким чином: class = "knopka". Тоді CSS код буде адресуватися до будь-якого посилання з назвою "knopka".
Ваше посилання буде виглядати так:
<a class="knopka" href="адреса посилання"> текст посилання </a>
<a class="knopka" href="адреса посилання"> текст посилання </a>
Або, наприклад, таким чином:
<a class="knopka" href="https://kpi.ua/"> НАШ УНІВЕРСИТЕТ </a>
Ну і головне - сам CSS код
Ну і головне - сам CSS код
<style>
.knopka {
padding:8px; /* Висота кнопки */
background:#ff6006; /* Колір кнопки */
border-radius:20px; /* Радіус округлення кутів кнопки */
box-shadow:5px 5px 8px -2px rgba(0,0,0,0.4)/* Тінь від кнопки та колір тіні */
}
</style>
.knopka {
padding:8px; /* Висота кнопки */
background:#ff6006; /* Колір кнопки */
border-radius:20px; /* Радіус округлення кутів кнопки */
box-shadow:5px 5px 8px -2px rgba(0,0,0,0.4)/* Тінь від кнопки та колір тіні */
}
</style>
Проста анімація кнопки за допомогою псевдокласу hover.
Давайте додамо зміну кольору кнопки при наведенні на неї курсору. Для цього можна використовувати псевдоклас hover. Нагадаю, що псевдоклас у CSS - це ключове слово, додане до селектора, яке визначає його особливий стан. Псевдоклас hover спрацьовує, коли користувач наводить на елемент курсор мишею, але не клацає на нього, і ми можемо використати такий hover для зміни кольору кнопки під час наведення на неї курсору.
Тоді наша кнопка матиме такий вигляд
А код кнопки з підказками матиме такий вигляд:
<div style="text-align: center;"> <!-- Розміщуємо кнопку по центру -->
<a class="knopka2" href="https://kpi.ua"><span style="color: white;">НАШ УНІВЕРСИТЕТ</span></a></div> <!-- Текст на кнопці та адреса посилання -->
<style>
/* Кнопка до наведення курсору */
.knopka2 {
padding:10px; /* Висота кнопки */
background:blue; /* Колір кнопки */
border-radius:20px; /* Радіус округлення кутів кнопки */
box-shadow:5px 5px 8px -2px rgba(0,0,0,0.4) /* Тінь від кнопки та колір тіні */
}
/* Кнопка після наведення курсору */
.knopka2:hover {
padding:10px; /* Висота кнопки */
background:purple; /* Колір кнопки */
border-radius:20px; /* Радіус округлення кутів кнопки */
box-shadow:5px 5px 8px -2px rgba(0,0,0,0.4) /* Тінь від кнопки та колір тіні */
</style>
Ви можете замінити посилання і назву кнопки, а також доопрацювати кнопку під свій дизайн, скориставшись підказками в коді.