Делаем кнопки с помощью CSS, техника раздвижные двери
17 августа 2009 года, Размещено в категории: HTML / 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
13 лет назад
техника не новая, на хабрхабре мусолилась уже несколько раз, и есть реализация со спрайтом (кнопка может растянуться до бесконечности)
13 лет назад
Да техника не новая, но все же неплохо… Кстати если записать как это делаеться на видео и сделать как видео — урок. То будет лучше! Поверьте! Я щас сам начал записывать видеоуроки!
С Ув. Антон Саблев
13 лет назад
Хм … о видео уроках я не задумывался как-то, видимо на видео больше времени уйдет, здесь времени на то чтобы пост написать бывает не хватает, я уже не говорю о видео. Но если будет свободное время, надо будет попробовать. СПС за идею 🙂