Динамическая Кнопка на чистом CSS.

Запись от and_y87 размещена 21.08.2012 в 12:52

Показов 62687 Комментарии 12

И так, сегодня я вам отвечу на вопрос который вы не задавали:

"как сделать динамическую кнопку на CSS?"

Отступление:
Последнее время я заметил что многие делают кнопки не пользуясь возможностями CSS в полной мере... Люди делают кнопки двумя файлами типа on и off, аля:
on - Кнопка при наведении на неё курсором;
off - Кнопка в нормальном режиме;
если адский мастер попадётся то можно ещё встретить третий тип:
activ - Кнопка нажата... всё по принципу ссылок...

Если Вы больФой гуру вёрстки, то дальнейшее вам вряд ли откроет что то новое, и вам проще будет нажать сочетание клавиш Ctrl + W, однако можете и остаться, дабы поправить меня если я в каком то месте допущу ошипку... (никто не идеален)

Приступим Друзья!
Блин, крепись народ... я не знал что будет столько букав!

Итак представим друзья: мы - верстальщик модного интернет магазина, продающего Бентли, Ягуары и Жигули... И вот... дизайнер нам дал задание оживить старые статичные ссылки... нам дан макет кнопочек как они должны выглядить:

Обычное состояние
При наведении.

За основу мы возьмём размер нашей будущей кнопки: 150 х 24 px.
естественно вы можете использовать свои размеры, эта часть гибко-настраиваемая...

Мой вариант кнопки можно увидеть тут

Само меню пускай у нас будет вот такого вида: некий блок div с идентификатором nav содержащий в себе какое то неопределённое множество ссылок...
Можно использовать и конструкцию с UL LI, но она больше подходит всётаки для многоуровневого меню, а мы тут проходим мальца другое

HTML5
1
2
3
4
5
<div id="nav">
    <a href="#">Бентли</a>
    <a href="#">Ягуары</a>
    <a href="#">Жигули</a>
</div>

подсказка

P.S. в будущем создавая стиль для меню старайтесь всегда учитывать то, что количество ссылок вам заранее неизвестно, их может быть сколько угодно, поэтому желательно делать автоматизацию для их стилизации...

Что я имею ввиду?
Для того что бы задать стиль ссылке не все, но некоторые используют class, получая такую ссылку:
<a href="#" class="some-class">Бентли</a>
минус такого подхода в том, что - Вам приходиться прописывать всем вашим ссылкам class
Однако автоматизировать сей процесс можно задав в файле .css
такой путь для стиля:

CSS
1
2
3
div#nav a{
    ...
}

благодаря такой конструкции стили применяются ко всем тегам <a> внутри уникального Блока div с id=nav.

Если же у вас не 1, а скажем 3 блока... или 5...
тогда делаем путь таковым:

CSS
1
2
3
4
5
6
div#nav a, 
div#nav2 a, 
div#nav3 a, 
div#nav4 a{
    ...
}

перечисляя через запятую все блоки получат для своих ссылок ваш стиль...

В настоящее время наше меню - полный ацтой...
Начинаем его приводить в человеческий вид, что бы это сделать отметим в своей голове, "что нам надо задать из свойств css для каждой ссылки?":
ширина и высота, для корректного отображения ссылок списком зададим дисплею св-во block, задать цвет, стиль шрифта, эффекты и вроде всё... и так у нас получилось следующее:

отступы (если понадобится)
ширину
высоту
позиционирование
цвет шрифта
размер шрифта
стили шрифта
выравнивание текста
эффекты (если понадобится)

подсказка

Старайтесь всегда описывать стили в однотипном порядке. В процессе когда вы привыкните, вам будет проще найти ту часть кода которую вам понадобиться по какой либо причине изменить.
Я описываю стили по такому порядку:

Сперва Отступы (margin, margin-top, ... ,padding, paddinr-left, ...)
Затем Ширина и Высота (width, height, min-width ... )
Следом позиционирование (position, top, left, right, bottom, display, float ... )
Тут Фон блока (background, background-position ... )
Затем Шрифт ( color, font, font-size, font-weight, font-style ... )
Следом Текст ( text-align, text-decoration, text-shadow, ... )
Остальное...

таким образом я уже понимаю что:
Начало это у меня - отступы, ширина высота...
Середина это - Позиционирование и Фон
Ближе к концу - всё про текст и шрифт...

согласитесь удобно...

Итак, определившись что нам надо от CSS пишем стиль который нам все ссылочки наши сделает красавчиками...

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
div#nav a {
    margin: 0;
    margin-bottom: 2px;
    padding: 0;  /* если хотите считайте меня параноиком, но  я часто прописываю (margin, padding = 0) :) */
    width: 150px;
    height: 24px;
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
    text-shadow: 2px 2px 0px #333;
}

теперь отдельно пару слов про задний фон ссылки...
При наличии двух файлов на сервере, клиенту приходится обращаться через браузер два раза к серверу, что бы получить оба эти файла, соответственно если у вас: к примеру, и вертикальное и горизонтальное меню, то будет 2 стиля ссылок это уже 4 запроса... а я сторонник оптимизации, чего и вам желаю... можно объединить графику в 1 файл и получится всего 1 запрос на сервер, это очень актуально конечно для больших медиапроектов, т.к. там ежесекундно идут тысячи запросов на сайт, но согласитесь приятно лазить по сайту который быстро грузится и не тормозит...

То - о чём я выше толковал именуется: спрайтами
Много информации о них можно будет посмотреть по этой ссылке,но только после того как вы всё дочитаете...

Суть этого процесса заключается в том что в нашей картинке будет сверху состояние кнопки в обычном режиме, а ниже в этой же картинке состояние кнопки если на неё навели курсор(:hover) пускай эта картинка будет лежать рядом с нашим файлом.html и иметь название: button_all.png...

Таким образом "допиливаем" наш css до следующего вида:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div#nav a {
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    width: 150px;
    height: 24px;
    display: block;
    background: url(button_al.png) center top no-repeat; /* дополнительные свойства center и no-repeat связаны опять таки с параноей*/
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
    text-shadow: 2px 2px 0px #333;
}

Важным элементом тут является - установка background и его позицианирование.
У нас фон прилипает к верхней границе блока <a>

Сделали? молодцы! Теперь как вы уже знаете делаем что бы картинка менялась при наведении...
Раньше использовался другой файл, а теперь используем другую позицию...
Допиливаем наш CSS добавляя код следующего вида:

CSS
1
2
3
4
5
6
div#nav a:hover {
    background-position: bottom; /* вот эта магическая вещь*/
    color: #00F; /* Немного поиграем с другими настройками...*/
    text-align: right;
    text-shadow: 2px 2px 0px #999;
}

Именно благодаря background-position: bottom; фон начинает прилипать к нижней границе, а поскольку область видимости фона ограничена мы видим только то, что нам нужно показывать...

В итоге получаем следующий HTML документ (я всё делал в одном ибо лень разбивать на 2

)

HTML Code

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<style>
div#nav a {
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    width: 150px;
    height: 24px;
    display: block;
    background: url(button_all.png) center top no-repeat;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
    text-shadow: 2px 2px 0px #333;
}
div#nav a:hover {
    background-position: bottom;
    color: #00F;
    text-align: right;
    text-shadow: 2px 2px 0px #999;
}
</style>
<body>
<div id="nav">
    <a href="#">Бентли</a>
    <a href="#">Ягуары</a>
    <a href="#">Жигули</a>
</div>
</body>
</html>

тут можете увидеть как оно работает
Все ссылки работают, как бэ Анимированы и всё круто...

В продолжении можно прикинуться крутым шлангом и сделать третью ~~анимацию~~:
- если на ссылку нажали...

Теперь картинка кнопки у нас имеет имя: button_3all.png
Мой вариант кнопки можно увидеть тут

Теперь разница лишь в том что придется в позиционировании фона использовать не слова а цифры... не бойтесь это не Алгебра тут всё проще...
В мозгу надо прикинуть следующую "схему":
у нас высота ссылки 24px это держем в уме;
1. первое сверху изображение это сылка в обычном режиме значит позицианирование такое: сдвиг по вертикали ноль, по горизонтали ноль;
2. второе изображение сверху это эффект при наведении, следовательно по вертикали мы изображение фоновое сдвигаем на 24px а по горизонтали не трогаем;
3. третье изображение сверху если на ссылку нажали, поскольку высота кнопок одинаковая сдвиг рассчитываем легко и не принуждённо, поскольку изображение треть сверху, над ним 2 изображения высота каждого нам известна = 24px, получается 24 * 2 = 48
ровно на 48px нам надо будет сдвинуть по вертикали фоновое изображение что бы показать эту часть картинки...

от слов к делу... редактируем наш css и добавляя ещё 1 стиль

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
div#nav a {
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    width: 150px;
    height: 24px;
    display: block;
    background: url(button_3all.png) center top no-repeat; /* тут можно оставить позицианирование как и было*/
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
    text-shadow: 2px 2px 0px #333;
}
div#nav a:hover {
    background-position: 0px -24px;
    color: #00F;
    text-align: right;
    text-shadow: 2px 2px 0px #999;
}
div#nav a:active {
    background-position: 0px -48px; /* тут мы задействовали наши хитрый ресчёты */
    color: #00F;
    text-align: right;
    text-shadow: 2px 2px 0px #999;
}

Просмотреть результат можно по этой ссылке

Вот так Вот дорогие друзья! Мы уделали принципы в принципе!

И теперь научились делать клёвые кнопочки

Так же можно делать сам шрифт непосредственно в изображении...
Это даст иногда преимущества к примеру Текст с рамкой и градиентом на прозрачном фоне...

Но щас БОНУСОМ я продемонстрирую преимущества использования именно текста. Преимущество заключается именно в - Анимации!
Да да... раньше я говорил анимация кнопки... но я через силу и с тяжёлым трудом заставлял себя так называть это событие... теперь воочию - вы увидите, что такое Анимация

опять допиливаем наш любимый CSS (я серьёзно... он наш любимчик!

)
приводим в такой вид:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
div#nav a {
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    width: 150px;
    height: 24px;
    display: block;
    background: url(button_3all.png) center top no-repeat;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
    text-shadow: 2px 2px 0px #333;
}
div#nav a:hover {
    background-position: 0px -24px;
    color: #00F;
    text-align: right;
    text-shadow: 2px 2px 0px #999;
    -webkit-animation: linkhover 1.95s 1 ease; /* +Add */
    -moz-animation: linkhover 1.95s 1 ease; /* +Add */
    -o-animation: linkhover 1.95s 1 ease; /* +Add */
}
div#nav a:active {
    background-position: 0px -48px;
    color: #fff;
    text-align: right;
    text-shadow: 2px 2px 0px #000;
}
 
@-webkit-keyframes linkhover {   /* +Add */
   from { text-shadow: 2px 2px 0px #333; color: #fff;}
   to { text-shadow: 2px 2px 0px #999; color: #00F;}
}
@-moz-keyframes linkhover {   /* +Add */
   from { text-shadow: 2px 2px 0px #333; color: #fff;}
   to { text-shadow: 2px 2px 0px #999; color: #00F;}
}
@-o-keyframes linkhover {   /* +Add */
   from { text-shadow: 2px 2px 0px #333; color: #fff;}
   to { text-shadow: 2px 2px 0px #999; color: #00F;}
}

В данный код мы включили начальный и конечный "кадры", а так же время за которое должно произойти это событие, а так же указали для какого стиля проигрывать эту Анимацию...

Просмотреть результат можно по этой ссылке

Спасибо за уделённое мне время, надеюсь эта информация вам поможет

Если вам понравилась данная статья и есть желание заказывайте темы через Личные Сообщения, тогда, возможно, продолжу эти "Уроки"

В Архиве примеры 3 файла html + 2 png

При обнаружении нерабочих ссылок просьба отписать мне в ЛС...

Размещено в Front-End Разработка, html, CSS, Разработка Сайтов

« [Фотки] Главная страница Скрипт "выделить все чекбоксы в текущей таблице" »

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

Всего комментариев 12

Комментарии

Про плавное изменение цвета - класс! Не знал. Толком не понял, но не суть. Буду знать, что так можно.
Еще красиво было бы такую анимацию сделать на переход кнопки в обычный вид(не hover).
Вижу и отступ таким образом плавно изменять можно. Вообще класс!

Запись от koorya размещена 21.08.2012 в 19:52 koorya вне форума

	Да, ньюанс в том что у меня было позиционирование текста внутри тега a... не охото было с padding мучиться хотя желание проскакивало =)) Если бы текст был бы внутри какого то тега можно было бы легко его двигать через left & right...
	Запись от and_y87 размещена 21.08.2012 в 20:44

	Супер! Незнал про такую функцию как active . Статья хорошая, спасибо!
	Запись от pavlinmavlin размещена 24.08.2012 в 08:38

	Моя душа радуется что я смог вам помочь, не зря значит старался... Жаль что коэффециент такой маленький... Просмотров 177 Комментарии 4
	Запись от and_y87 размещена 04.09.2012 в 22:43

	Это говорит, что статья интересная и вбросов не было.
	Запись от basili4 размещена 05.09.2012 в 10:23

	Если всё так, то это замечательно
	Запись от and_y87 размещена 05.09.2012 в 10:23

	Жаль, спасибо тут кнопкой говорить нельзя! Потому только комментарием - спасибо за работу со спрайтами!
	Запись от Skipy размещена 06.09.2012 в 16:49

	Пожалуйста
	Запись от and_y87 размещена 06.09.2012 в 18:03

	Спасибо Столько лет прошло.. а всё актуально! Большое спасибо!
	Запись от ioan673 размещена 23.08.2015 в 11:27

Сообщение от Skipy

Жаль, спасибо тут кнопкой говорить нельзя! Потому только комментарием - спасибо за работу со спрайтами!

В правом верхнем углу "Оценить эту запись".

and_y87, Смотрю все измеряется в пискселях, вероятно это не очень хорошо жестко задавать абсолютные значения, в место гибких относительных.

Запись от Avazart размещена 23.08.2015 в 15:30 Avazart вне форума

ioan673, рад что могу быть полезным. =)

Avazart, в рамках обучающей статьи, которые читают в основном новички, лучше использовать простешие примеры, что бы не порождать новые вопросы, а показывать читателю решение текущей задачи, статья же должна показать "логику создания кнопки" и не методику вычисления координат в спрайте.

Запись от and_y87 размещена 23.08.2015 в 20:42 and_y87 вне форума

	Я считаю что учить нужно делать сразу правильно, ну или хотя бы озвучивать проблему. И все равно как не наглядно, изображения добавил бы что ли. К примеру http://shpargalkablog.ru/2012/... ki.html#on
	Запись от Avazart размещена 08.02.2016 в 19:56

Новые блоги и статьи Все статьи Все блоги /
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .	Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .
Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))	Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .	Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему kumehtar 26.08.2026 ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .

Сообщение форума

Отменить изменения