С помощью фоновых изображений, можно создать "резиновую" кнопку, которая будет адаптироваться по ширине в зависимости от содержимого текста.
Этот метод полезен для создания кнопок, которые имеют разные размеры, как показано в следующем примере.
Основная идея заключается в том, чтобы добавить к нашему HTML элементу «а»:
1. пустой элемент с фоновым изображением для левой части: в этом примере – «em».
2. элементы, содержащие текст и изображения фона для центральной части: «span» в этом примере.
3. пустой элемент с фоновым изображением для правой части: в этом примере – «b».
Изображения, используемые здесь:
(35×35px) для элемента em
(10×35px) для элемента span
(35×35px) для элемента b
Код html:
<em></em>
<span>Our text content</span>
<b></b>
</a>
Правила css:
display: block;
float: left;
background: url(em_bg.jpg) no-repeat;
width: 35px;
height: 35px;
}
a span{
display: block;
float: left;
background: url(span_bg.jpg) repeat-x;
height: 35px;
}
a b{
display: block;
float: left;
background: url(b_bg.jpg) no-repeat;
width: 35px;
height: 35px;
}
Что касается базового CSS горизонтальное меню, мы используем:
CSS свойство display со значением block преобразует встроенный элемент в блочный
CSS свойство float со значением left используется для выравнивания элементов по горизонтали
CSS свойство background со значением no-repeat для пустых элементов «em» и «b», и значением repeat-x для элемента «span» для добавления фоновых изображений
CSS свойства width и height для определения размеров элементов. При этом у элемента «span» не указывается ширина, так как она зависит от размера текста, который в нем содержится.
Материал подготовлен: www.web-lesson.ru
Ключевые теги: CSS, кнопка
