Создаем кнопку с помощью CSS: Часть вторая

10 февраля 2010 года, Размещено в категории: HTML / CSS

Создаем кнопку при помощи CSS

И так это  второй мой урок из серии "Создаем кнопку с помощью CSS. Где мы будем знакомиться с такой технологией как CSS спрайты. Это один из самых простых и распространенных способов, при помощи которого  создают динамические кнопки и меню.

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

Шаг 1:
В чем суть техники CSS Sprite, а в том что у нас есть одно изображение на котором уже нарисовано несколько состояний нашей кнопки. Кто не знает в ссылки есть 4 состояния в котором она находится:
1. Активная (active)
2. Не посещенная (link)
3. Уже посещенная (visited)
4. Когда над ссылкой курсор (hover)

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

кнопка CSS

Шаг 2:
Теперь оформляем нашу кнопку при помощи CSS (смотрите комменты к каждому свойству CSS в низу). Кто не знает, как создать и прикрепить CSS файл к HTML файлу, тогда смотрите в первом уроке.

Download
a.btn3 {
display:block; /*отображаться блоком*/
width:228px;  /*Ширина кнопки*/
height:49px;   /*Высота кнопки*/
background:url(btn_sprite_blue.gif) 0 0 no-repeat; /*подключаем изображения ссылки*/
text-align:center;   /*Текст по центру*/
font-size:24px;   /*Размер шрифта*/
font-weight:700;   /*задаем жирность шрифта*/
text-decoration:none;  /*убераем черту снизу ссылки*/
color:#fff;   /*цвет  ссылки в состоянии покоя*/
font-family:arial;  /*шрифт ссылки*/
line-height:35px;   /*расстояние между строками текста*/
border-width: 0px; /*убераем рамку с ссылки изображ.*/
}

a.btn3:hover {
background:url(btn_sprite_blue.gif) 0 -51px no-repeat;   /*подключаем изображения ссылки*/
color:#666;   /*цвет  ссылки  ккогда над ней курсор */
}

Теперь разложу по полочкам, самый важный кусок CSS, с помощь которого происходит анимация нашей кнопки:

/*Сжатый код*/
{background:url(btn_sprite_blue.gif) 0 -51px no-repeat;}

{background:url(btn_sprite_blue.gif); /*подключаем изображения*/
background-position-x:0; /*задает горизонтальную координату фонового рисунка*/
background-position-y:-51px; /* задает вертикальную координату фонового рисунка*/
background-repeat: no-repeat; /*запрещает фоновому изображению повторяться;*/
} 

Для тех кто не понял, когда мы наводим курсор на кнопку изображение опускается по вертикали на -51px и меняем цвет текста, так и выходит анимационная и динамичная кнопка. Таким образом мы можем каждом из состояний кнопки, предоставить разные варианты оформление.
Для этого нам нужно их нарисовать и прописать в CSS файл.
Ну вот и вся технология CSS спрайтов, ничего тяжелого здесь нет, нужно только понять как оно работает.

Мой блог находят по следующим фразам
бесплатный плеер для сайта
плавное перемещение по странице css
фотогалерея для сайт
div скролл css галерея
фотогалерея для сайта на jquery
миниатюры автоматом wordpress






8 комментариев

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

    border-width: 0; забыл добавить, а то рамка в некоторых брауз. появляется из-за ссылки

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

      Спасибо что сказал, а то не увидел. Урок ночью писал просто:)

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

    еще можно outline добавить, чтоб небыло видно выделения при клике в мозиле

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

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

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

    точнее, почему-то первая кнопка в блоке работает, а вторая нет(нету перехода от одной картинки к другой):(

  • А как прописать эту кнопку в боковой виджет — на WP — прямо в виджет писать или этого сделать невозможно???

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

      Можно в виджет, а можно через файл темы вставить.

  • Суппер! Спасибо разобрался! Я уже давно облизывался на кнопки такого рода…
    Незнал как их делают! Я думал что это флеш… Но когда научился делать аматорский флеш, то понял что это не то… Понял из за того, что в некоторых браузерах мне предлагалось сначало запустить флеш… Да и флеш по кругу ходит — а тут по активности!!! Суппер короче.
    А по предидущему сообщению я прогнал. Вызов из виджета делаем так же как и с файла «хедер» или «футтер». У меня немного по свойму там получилось — но инфа от вас помогла на 97,9% ? (точно как у алкоголика 🙂

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

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

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