Верстка Кросбраузерної та гумової кнопок у html

за Ніколаєнко Максим · Опубліковано Липень 26, 2013 · Оновлено Липень 27, 2013

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

<a class="GlobalOrangeButton" href="https://wp-admin.com.ua"><span>Уроки WordPress</span></a>

1	<a class="GlobalOrangeButton" href="https://wp-admin.com.ua"><span>Уроки WordPress</span></a>

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

a.GlobalOrangeButton span {
  background: transparent url(’https://media-sprout.com/tutorials/web/CSSSprite-SlideButton/images/button_left_orange.png’) no-repeat 0 0;
  display: block;
   line-height: 22px;
  padding: 7px 0 5px 18px;
  color: #fff;
}

a.GlobalOrangeButton {
  background: transparent url(’https://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_right_orange.png’) no-repeat top right;
  display: block;
  float: left;
  height: 34px;
  margin-right: 6px;
  padding-right: 20px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
}

a.GlobalOrangeButton:hover span {
  background-position: 0 -34px; color: #fff;
}

a.GlobalOrangeButton span {

background: transparent url(’https://media-sprout.com/tutorials/web/CSSSprite-SlideButton/images/button_left_orange.png’) no-repeat 0 0;

display: block;

line-height: 22px;

padding: 7px 0 5px 18px;

color: #fff;

}

a.GlobalOrangeButton {

background: transparent url(’https://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_right_orange.png’) no-repeat top right;

display: block;

float: left;

height: 34px;

margin-right: 6px;

padding-right: 20px;

text-decoration: none;

font-family: Arial, Helvetica, sans-serif;

font-size:12px;

font-weight:bold;

}

a.GlobalOrangeButton:hover span {

background-position: 0 -34px; color: #fff;

}

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

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