На soma вони діляться темою, яка не нова, але часто з цією темою роблять багато помилок. Сьогодні з особистого досвіду розробки хочу поділитися цікавим досвідом верстки кнопок у html. Перше, що нам треба, це правильно побудувати структуру майбутньої кнопки.:

<клас="GlobalOrangeButton" href="https://wp-admin.com.ua"><проліт>Уроки WordPress</проліт></a>

CSS для цієї кнопки буде виглядати так:

a.GlobalOrangeButton span {
  тло: Прозора URL-адреса('https://media-sprout.com/tutorials/web/CSSSprite-SlideButton/images/button_left_orange.png') без повторення 0 0;
  Відображення: блокувати;
   висота лінії: 22px;
  Заповнення: 7px 0 5px 18px;
  колір: #ФФФ;
}

a.GlobalOrangeButton {
  тло: Прозора URL-адреса('https://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_right_orange.png') без повторення вгорі праворуч;
  Відображення: блокувати;
  плавати: Ліворуч;
  height: 34px;
  Поле праворуч: 6px;
  відступлення праворуч: 20px;
  текстове оформлення: Ніхто;
  Гарнітура: Аріал, Гельветика, sans-serif;
  розмір шрифту:12px;
  вага шрифту:жирний;
}

a.GlobalOrangeButton:Розмах наведення {
  фонове положення: 0 -34px; колір: #ФФФ;
}

Все дуже просто, але іноді про цей простої та ефективний метод верстки забувають, хоча багато клієнтів вимагають і заокруглення і тіні в ІЕ 7. Також кнопки добре виглядатимуть і в браузерах opera, firefox, safary, yandex browser та багатьох інших, навіть у старих їхніх версіях. Все це можна реалізувати найпростішим способом, який я вам показав вище.

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