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

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

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

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

Крок 2: HTML

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

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

Крок 3: CSS

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

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

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

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

Схожі статті