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

17 августа 2009 года, Размещено в категории: HTML / CSS

Делаем кнопки с помощью 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






3 комментария

  • 8 лет назад Ответить

    техника не новая, на хабрхабре мусолилась уже несколько раз, и есть реализация со спрайтом (кнопка может растянуться до бесконечности)

  • Да техника не новая, но все же неплохо… Кстати если записать как это делаеться на видео и сделать как видео — урок. То будет лучше! Поверьте! Я щас сам начал записывать видеоуроки!
    С Ув. Антон Саблев

    • 8 лет назад Ответить

      Хм … о видео уроках я не задумывался как-то, видимо на видео больше времени уйдет, здесь времени на то чтобы пост написать бывает не хватает, я уже не говорю о видео. Но если будет свободное время, надо будет попробовать. СПС за идею 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: