Створення кнопок за допомогою CSS, HTML без javascript

64

Якась фобія у наших користувачів щодо використання javascript, досить часто зустрічаю в коментарях питання про те, що при відключених скриптах в браузерах, що то перестає працювати. Люди часом не спромагаються навіть вникнути у процес створення того або іншого рішення.

Ну, а раз є потреба і невгамовне бажання не використовувати javascript в роботі, на прикладі створення кнопок покажу, як можна створити і додати динамічність вашим кнопок за допомогою чистого CSS, без будь то або застосування javascript.

Цей метод використовує стандартні теги HTML, CSS-стилі для графічних налаштувань і без JavaScript.

Для всього фону самої кнопки, ми будемо використовувати один невеликий файл зображення. Дане рішення дозволяє створити повністю індивідуальний дизайн, застосовний до оформлення нашої кнопки. При цьому зберігається можливість використання HTML тексту на тілі кнопки при її автоматичному збільшення або скорочення в залежності від довжини тексту.

Крок 1: Зображення (button.png)

Скопіюйте цей невеликий файл із зображенням, в папку, де у Вас знаходяться всі картинки для сайту, найчастіше це папка images, або що то в цьому роді.
Цей файл стане тлом для майбутньої кнопки.

Наступним кроком, буде правильна розмітка на сторінці HTML.

Крок 2: HTML

На цій стадії все до неподобства просто, там де вам необхідно за задумом або за гострої необхідності, в тілі вашої сторінки слід прописати наступний код:

<div class="buttons"><button type="submit">КНОПКА</button><span></span></div>

КНОПКА

У підсумку вийде візуальне втілення вашої кнопки безпосередньо на сторінці сайту. Але що б наше дітище виглядало по-справжньому оформленим, вдамося до допомоги все тих же таблиць каскадних стилів, просто CSS.

Крок 3: CSS

Щоб полегшити роботу і щоб не захаращувати сторінки зайвим кодом, винесений файл стилів .css, якщо такий є, ну а якщо ні то все ж на сторінці між тегами head прописуємо наступне:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
>
/* BUTTONS */
кнопки button{
cursor: pointer;
cursor: hand;
border: 0;
height: 28px;
float: left;
text-indent: 4px;
text-decoration:none;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2 em;
background: url(../images/global/button.png);
}
.buttons span{ /* Right-hand corner */
cursor: pointer;
cursor: hand;
display: block;
width: 5px;
height: 28px;
float: left;
background: url(../images/global/button.png) top right;
}
>

/* BUTTONS */
кнопки button{
cursor: pointer;
cursor: hand;
border: 0;
height: 28px;
float: left;
text-indent: 4px;
text-decoration:none;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2 em;
background: url(../images/global/button.png);
}.buttons span{ /* Right-hand corner */
cursor: pointer;
cursor: hand;
display: block;
width: 5px;
height: 28px;
float: left;
background: url(../images/global/button.png) top right;
}

Шляхи до картинки можуть відрізнятися від ваших, так що слід пам’ятати про правильність напряму, щоб не отримати порожнечу замість кнопки.

Розмір тексту на кнопці регулюється параметром font-size, можете сміливо експериментувати.

Ось і все, наша чудова кнопка без найменшого javascript готова. Якщо потрібен інший колір і форма, просто створіть своє зображення для фону, колдуйте над стилем, обмеженням є тільки обсяг вашої фантазії.

Люди кажуть:

Давайте будемо людьми хоча б до тих пір, поки наука не відкриє, що ми є чимось іншим.