Делаем кнопки с помощью CSS, техника раздвижные двери

Эта статья покажет вам, как создать себе кнопки, с помощью CSS технике "раздвижные двери". Этот метод лучше использовать, чем использование изображения кнопок. Большой плюс в том, что вы можете применить этот стиль к любой ссылке, и в то же время не нужно рисовать каждую кнопку. Вы экономите много своего времени, а времени всегда не хватает веб-мастеру 🙂

Что ж такое техника раздвижных дверей ??
Этот метод очень прост. Если мы хотим иметь динамическую ширину кнопки, мы должны найти способ растянуть ее по горизонтали.
Нам нужно будет создать два фоновых изображения, которые будут определять кнопки: одна для левой стороны, и одна для правой стороны - как в примере, приведенном ниже.

Левая часть у нас стоит на месте, а правая часть у нас  двигается,  она движется по ширине текста. Изображение внизу показывает технику.

Во-первых, давайте взглянем на HTML элементы, которые будут имитировать нашу красивою кнопку. У нас <span> будет находиться в  ссылке.  Span содержит широкое изображение и текст. Ширина текст будет определять размер кнопки.

Submit

Теперь давайте взглянем на код CSS. Мы имеем класс a .button который будет применяться к тегу <a>. Класс .button span который будет применяться к <span>. Мы также имеем .button:hover который будут менять стиль шрифта.
И это все. Просто, да?
Комментарии в коде ниже, описывают каждый класс.

a.button { /* правая часть изображения */ background: transparent url('button_right.png') no-repeat scroll top right;
display: block;
float: left;
height: 32px; /* Изменить это значение, по  Высоте изображения */
margin-right: 6px;
padding-right: 20px; /* Изменить это значение, по ПРАВОй ширине изображения*/
/* Свойства шрифта */
text-decoration: none;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;}
a.button span {
/* Фон кнопки (левое часть изображения) */
background: transparent url('button_left.png') no-repeat;
display: block;
line-height: 22px; /* Изменить это значение ПО ВЫСОТЕ кнопки */
padding: 7px 0 5px 18px;}
a.button:hover span{
text-decoration:underline;}

Результат будет выглядеть примерна так:

Вот список уроков как сделать кнопку при помощи CSS:
Создаем кнопку при помощи CSS: Часть первая
Создаем кнопку при помощи CSS: Часть вторая
Делаем кнопки с помощью CSS, техника раздвижные двери
Бонус:
Красивые CSS кнопки с иконками.

Мой блог находят по следующим фразам
• script audio player для сайта ucoz
• конструктор плееров для сайта
• плеер для сайта
• http://dicim.net/15-pleerov-na-chistom-html5.html
• где находится css-файл шаблона резинового макета
• простой flash player