Создание динамической кнопки на CSS, видеоурок

Во-первых, что такое «динамическая кнопка». Динамическая кнопка — это кнопка, вид которой меняется при наведении на неё указателя мыши.

Вы можете посмотреть, как выглядит динамическая кнопка.

Такая красота очень часто верстается путём программирования на JavaScript. По умолчанию, загружена первая картинка, которая и представляет собой кнопку. При наведении на неё указателя мыши, происходит смена предыдущей картинки на новую (этим самым JavaScript-ом).

Что мы имеем в результате?

В результате, у нас есть две картинки: первая — вид кнопки по умолчанию, вторая — при наведении мыши. Когда я навожу мышь на кнопку по умолчанию, у меня происходит загрузка изображения номер два. И если используется большая и красивая кнопка или мой интернет медленный, какое-то время после наведения мыши, кнопка «тупит» и не меняет своего вида. За это время происходит подгрузка изображения номер два.

Проблемы «тупости» кнопки при первой загрузке сайта можно решить путём установки скрипта-загрузчика. Этот скрипт будет «заливать» в «кеш» сразу оба изображения для моей динамической кнопки.

А можно пойти совсем другим путём и сверстать эту кнопку вообще без применения JavaScript. И всё это дело будет называться динамической кнопкой на CSS.

Процесс создания изображения для кнопки в Photoshop и её вёрстку, я записал в формате видеоурока.

Поехали!

Для начала расскажу, чем хороша динамическая кнопка на CSS.

Оба изображения (по умолчанию и при наведении) содержатся в одном файле и одновременно загружаются на компьютер посетителя. Значит, никаких «тормозов», связанных с подгрузкой изображения, не будет.

Если кнопка сделана старым дедовским способом, то в случае желания изменить текст на ней, вам нужно либо загружать Photoshop и рисовать новую кнопку, либо просить об этом дизайнера. В случае CSS-кнопки: вы в любой момент можете поменять текст на ней. Дальше будет понятно, как такое может быть.

Сама CSS-кнопка формируется при помощи вот такого HTML-кода:

<a href="/" class="button"><span>Содержимое кнопки</span></a>

Редактируйте HTML и меняйте текст «Содержимое кнопки» на любой другой.

Конечно, CSS-свойства для данной кнопки будут иметь относительную монструозность. Но это лишь на первый взгляд.

.button {
  display: block;
  color: #FFF;
  background: url(/img/button-r.jpg);
  background-position:top right;
  background-repeat:no-repeat;
  padding-right: 23px;
  float: left;
  outline: none;
  text-decoration: none;
  font-size:14px;
  margin-left: 130px;
}

.button span {
  display: block;
  line-height: 10px;
  background: url(/img/button-l.jpg);
  background-repeat:no-repeat;
  padding: 15px 0 15px 23px;
}

.button:hover {
  background-position: 100% -40px;
}

.button:hover span {
  background-position: 0% -40px;
  color: #000;
}

В видеоуроке я подробно расскажу про назначение каждого из свойств.

Теперь давайте поговорим о принципах реализации.

В принципы заложена технология «раздвижных дверей». «Раздвижные двери» — это фоновые изображения, задаваемые в CSS-файле для тега <a> и для вложенного в него тега <span>.

Вот такое изображение задаётся в качестве фона для тега <a> (левая «створка» «раздвижных дверей»):

А вот какое фоновое изображение у тега <span> (правая «створка» «раздвижных дверей»):

Как вы видите, в фоновом изображении присутствует сразу обе кнопки (сверху — по умолчанию, внизу — при наведении мыши). CSS-инструкции заданы таким образом, что в зависимости от того, наведена мышь на кнопку или нет, фоновое изображение перемещается и видна только одна его часть (верхняя — по умолчанию, нижняя — при наведении мыши).

Над левой «створкой» «раздвижной двери» расположен текст кнопки, справа к тексту кнопки прижимается правая «створка» «раздвижной двери». Правая «створка» накрывает сверху левую и видна только та часть левой «створки», над которой расположен текст.

Длина левой «створки» выбирается таким образом, чтобы самый длиннющий текст, который может появиться на кнопке, не оказался бы длиннее неё.

Минусы CSS-кнопки

Я нашёл ровно два минуса:

Определённые проблемы с позиционированием кнопки. Нельзя попросту выравнивать кнопку свойством «text-align» или равенством левого и правого «margin». Возникает такая загогулина из-за присутствия в описании свойств тега <a> инструкции «float:left». Для её позиционирования можно применять либо «position:relative» и далее задавать координаты смещения «top» и «left». Или указать значение отступа слева.

Невозможно применять в качестве фонового изображения картинку с прозрачностью. Если кнопка, волей дизайнера, имеет закруглённые углы, а фон под ней — сложный (градиент либо какой-то хитрый узор), то в месте, где обрезан уголок у кнопки, должна быть прозрачность (через эту прозрачность просматривается тот самый сложный фон). Так вот, в случае «раздвижных дверей», для правой стороны кнопки, через прозрачность будет просматриваться не фон подложки, а левая «створка» «раздвижной двери».

Видеоурок

Теперь перейдём к обещанному видеоуроку. Видеоурок состоит из двух частей. В первой части я покажу, как при помощи Photoshop создать фоновое изображение для нашей будущей кнопки. Во второй части мы превратим будущую кнопку в реально существующую.

Первая часть. Подготовка фонового изображения в Photoshop:

Вторая часть. Вёрстка динамической кнопки:

Кстати, такой принцип вёрстки, когда несколько изображений находятся в одном файле, очень часто применяется в высоконагруженных проектах. При этом все возможные графические элементы на странице засовываются в один файл и загружаются разом. Видели бы вы файл, содержащий графику страницы «Яндекса».

Автор: Андрей Морковин.

Ещё материалы по этой теме:

body {
background-color: #000000; // задаешь цвет фона
background-image:url(путь/имя_картинки); // указываешь картинку
background-repeat:no-repeat; // указываешь что твой фон не повторяется
background-position:top; // позиция на верху (можно внизу)
background-attachment:fixed; //зафиксировано при скролинге мышкой,
//относительно монитора!,
//а если поставить scroll, то будет статично
//относительно всего сайта,
//т.е. при прокрутке мышкой и картинка
//прокрутиться тоже.
//вот и вся наука!
}

Андрей Морковин
Да, Lardok прав, сделать это очень просто, достаточно знать одно свойство CSS:
«background-attachment:fixed»
После указания этого свойства фоновое изображение не перемещается при скролировании страницы.
Естественно нужно указать свойство «background-repeat:no-repeat», чтобы фоновая картинка не замащивала всю ширину блока.
При помощи свойства
«background-position: значение отступа сверху значение отступа слева»
задается расположение фонового изображения в том блоке, для которого применяются данные свойства.
Lardok, спасибо за подробный CSS-код.

Lardok
…еще пару «спасибо» и мне юзерпик разрешат добавить)))

Андрей Морковин
Разрешаю тебе добавить юзерпиииик!
Иди на ru.gravatar.com, сын мой, и добавляй юзерпик в соответствии с твоим е-маилом и жизненной позицией.

Lardok
я толи не понял зачем этот сайт, толи вы меня не поняли: я хотел на этот сайт добавить!
а на том, я зарегился!

Андрей Морковин
Сайт ru.gravatar.com служит для установки юзерпиков на все блоги, в которых Вы, комментируя, указываете в качестве e-mail тот адрес, для которого установили картинку на Gravatar.
Аватар появится в ваших комментариях автоматически.

step
Картинка дожна быть на весь экран или цвет остального фона тоже можно задать

jhekasoft
Спасибо:)

Андрей Морковин
Пожалуйста

npofopr
вообще по фону можно сделать урок, но включить туда не только «неподвижный фон», а например еще и «Использование градиента в качестве фона страницы», еще как то была задача, что если есть большая картинка с разрешением эдак 1600х1200 и чтобы она по центру позиционировалась, а при наведении мышки например к углу, картинка пододвигалась. как то так. вообще про фон можно я думаю много чего придумать и написать) про те же z-index’ы, хотя это тут вроде уже обсуждалось. может я и не прав, и это все делается 1-2 комментариями в цсс

Андрей Морковин
Да, про фон есть что сказать, конечно. Тема обширная.

ArtShok
Пофикси стили, а то в FireFox и IE 6 кнопка по-разному отображается и со шрифтами косяк какой-то.

Андрей Морковин
Спасибо. Это все кодировки, пофиксил.

motor2hg
Динамическая кнопка это хорошо! Но к чему одна кнопка? Многим интересно меню-динамическое! И сделать такое меню можно с помощью специального сервиса. Бесплатного!
***

Андрей Морковин
Отличная ссылка, спасибо!
Только, уважаемые посетители, настоятельно рекомендую ознакомиться с видеоуроком, а не просто создавать при помощи сервиса что-то. Дабы не было магического трепета перед технологией спрайтов

Дмитрий
Андрей, а подскажите пожалуйста, как сделать самую обычную кнопку — типа той, что у вас в форме подписки по e-mail или же в этих комментах (Добавить). Меня, правда, интересует больше именно класс в css. Знаю, что просто, но как-то не очень понятно в деталях.

Андрей Морковин
Кнопка в HTML генерируется тегом (в данном случае на кнопке будет написано «Отправить»).
Но, самое интересно, что внешний вид кнопки можно изменять при помощи CSS-стилей. Кнопка подчиняется заданием бордера, фона и т.д. Но дело это не такое простое, как кажется (т.к. есть IE и даже мой любимый FF без закидонов не обошелся). Я запишу подробное видое по этой теме. Немного терпения и Вы получите развернутый ответ на Ваш вопрос.

Дмитрий
Спасибо, Андрей, буду ждать, очень интересно.

Саша Туманов
Чувак, спасибо тебе, ну просто огромненское!!!
Замечательные уроки, все скачал и прошел. Ориентируюсь в css теперь на порядок увереннее…
Короче, аригато сэнсэй ))))

Андрей Морковин
Рад помочь, чувак.

Человек_без_именИ
Очень нравится как сделана кнопка: https://www.artlebedev.ru/technogrette/html/framed/ … но уж так замужрено … Твой способ вроде как попроще В) … интересно, применим ли тот случай к этому … надо поэксперементировать В)

Never Lex
Тема конечно не нова, поднималась на блогах и форумах много раз. Но в видео формате объяснялся впервые Респект учителю

Андрей Сорвин
Благодарен автору за статью.
Андрей, а почему только два состояния кнопки (обычное и hover)? Почему бы не дополнить пример состоянием в момент нажатия (active)? Раз мы нажимаем на кнопку, значит она должна нажиматься ))

Андрей Морковин
Вполне может быть и active.

AddBoy
Спасибо, пригодилось) Правда, пригодилась только технология «раздвижных дверей», в сайдбар добавил к ссылкам бэкграунд при наведении, кстати с прозрачностью, получился эффект свечения. В опере все норм, в других пока не тестил.

Андрей
Спасибо за курс! Очень познавательный!!!
Есть вопрос, а если я столкнклся с проблемой №2, сложный ресунок под кнопкой, но кнопку надо сделать динамической, как быть. есть варианты?

artyukhigor
добрый день,
я нихрена не понял.
хотелось бы просто узнать
HTML — код для динамической кнопки,
так чтоб было ясно три момента:
1. куда вписать URL первой картинки?
2. куда вписать URL второй картинки?
3. куда вписать URL открываемой страницы?
КТО знает напишите мне пожалуйста на
artyukhigor@meta.ua

cordeie
Все понял, и почти со всем разобрался, большое спасибо!
Но, у меня что-то не так с цветом текста в кнопке:
Он не меняется, а остается по умолчанию, вернее в css у меня присутствует следующее:

a:link {
color : #a81818;
text-decoration : none;
}

a:hover {
color : #9fa39f;
text-decoration : none;
}

a:active {
color : #ffffff;
text-decoration : none;
}

a:visited {
color : #0f640d;
text-decoration : none;
}

и тот цвет что задается кнопке в дефолтном состоянии и активном не действует…

cordeie
В смысле, я не понимаю как сделать так, чтобы тот цвет который я прописал для тега по дефолту, действовал только по дефолту. Удалил те стили о которых писал выше, и указанный цвет сработал. Но на всем сайте ссылки потеряли стиль…

Никита
А где взять таблетку PNG24 (прозрачность) для IE6?

Андрей Морковин
В текстовом описании к 7-му видеоуроку по div-верстке есть ссылка на скачивание скрипта прозрачности для IE6

Александр
Всем привет
Чтобы особенно не заворачиваться с CSS я использую тему Atahualpa, если кто о ней не слышал, вкратце: вам не нужно рыться в файлах и искать где же вставить нужный код, и какой код нужно править и т.д.
Все у вас перед глазами, только особо «одаренный» не допрет
Но, как тема не хороша, а хочется индивидуального дизайна, и такие сайты как Ваш в этом помогают. Нашел здесь как позиционировать кнопки рубрик. Спасибо.
Я недавно поставил себе задачу сделать выпадающее меню для правил, к форме комментариев, получилось клево теперь пользователя не перекидывает в новое окно что бы прочитать правила.

Артем
Доброго времени, Андрей,
прочитал урок! Спасибо )
Возник вопрос: а к чему вообще «раздвижные двери»? То есть я, например, делал всегда такие кнопки на CSS не используя бэкграундов для тега . Конпка ведь все равно «резиновой» не получается (или я что-то не так понял?), зачем нужна вторая створка? )) Просто когда я оперирую в CSS только с тегом не возникает проблем с прозрачностью картинок. А можно использовать для дополнительных картинок (при условии :hover), например, граfически оfормленных пояснений и проч.
Объясни, плиз, если я что-то упустил из поля зрения ))
С уважением!

Muxomor
Спасибо вам большое за урок!
Но у меня возникла проблема при отображении в браузерах.
Я расставил 5 таких меняющихся кнопок в виде вертикального списка для левого сайдбара. В FireFox смотрится красиво, все отлично! а в IE8 кнопки по высоте расширяются и снизу выглядывает часть второй картинки. и текст на кнопке при этом смещается. Что делать? Подскажите пожалуйста.

Ксения
Добрый день! Спасибо большое за урок. Но. кнопки я давненько научилась делать, у меня другая проблема, кажется уже, что я совсем блондинка Не могу я никак понять как мне сделать активную кнопку на сайте и ч\з нее гиперссылку на другую страничку, уже всю голову сломала, люди добрые, помогите чем сможете Если что, сайт на ucoz. Можно писать на Ksenia8-4@yandex.ru Спасибо заранее

Вячеслав
Добрый вечер, Андрей! Хочу предложить решение одного из минусов этой кнопки, а конкретно — сложность фона за кнопкой. Если к ссылке применить position:relative, а к span positin:absolute; right:-23px;padding-right:23px;, то все будет ОК! То есть фон ссылки не будет просвечивать за фоном span.

Виктор
Видео понятно, вроде), благодарю )

Роман Петрицкий
спасибо

Old Kook
Очень помог ваш портал! Благодарен за статью очень помогла! Были проблемы, но в целом справился и кнопка заработала!

Илья
в тот блок где должна быть кнопка

#div{
ля ля ля
#button:
text-align…. ;

Вёрстка динамической кнопки на CSS

Минусы CSS-кнопки

Видеоурок

Первая часть. Подготовка фонового изображения в Photoshop:

Вторая часть. Вёрстка динамической кнопки:

Ещё материалы по этой теме:

Комментарии:

Полезные ссылки: