У деяких 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>
Виглядає та працює так:
Міняти написи на кнопках можна просто в режимі верстки.
Спосіб другий
Спочатку створіть html посилання: <a href='адреса посилання'> текст посилання </a>
Далі, для цього посилання Вам потрібно присвоїти атрибут 'class', з назвою кнопки. Ну, наприклад, так: class = 'knopka'. Тоді CSS код буде адресуватися до будь-якого посилання з назвою 'knopka'.
<a class='knopka' href='адреса посилання'> текст посилання </a>
Ну і головне - сам CSS код
Спочатку створіть html посилання: <a href='адреса посилання'> текст посилання </a>
Далі, для цього посилання Вам потрібно присвоїти атрибут 'class', з назвою кнопки. Ну, наприклад, так: class = 'knopka'. Тоді CSS код буде адресуватися до будь-якого посилання з назвою 'knopka'.
<a class='knopka' href='адреса посилання'> текст посилання </a>
Ну і головне - сам 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>