Процесс создания веб сайта не совсем прост как кажется на первый взгляд! Для того чтобы получить хороший результат необходимо правильно расставить все элементы на сайте а так же каждый элемент должен выполнять определенные действия, для того чтобы пользователю приятно было проводить на вашем сайте время, если сайт не привлекает пользователя то вряд ли вы сможете продать какой либо товар или услугу!
Так вот, сегодня мы поговорим про кнопки (ссылки). Как вы знаете обычные текстовые линки давно уже не привлекают внимание зрителя! Сайт который построен только на тексте без каких либо эффектов можно назвать доисторическим! Даже веб сайты которые особо не привлекают внешним дизайном обязательно ставят какие нибудь, возможно простые эффекты на ссылки. Более красивого эффекта можно добиться поставив под текст красивый фон, который меняется на другой при наведении на него курсора мыши.
Так вот приступим:
Показывать я буду на примере сайта который мы с Виталиком собрали совсем недавно http://mysudak.com.ua Рассмотрим пример горизонтального левого меню.
Первым делом вам нужно нарисовать сами кнопочки:
- Кнопочка 1
- Кнопочка 2
С виду эти 2 кнопочки не имею никакого различия но если присмотреться то можно заметить что тень на кнопочке №2 немного меньше таким образом мы создаем эффект нажатия.
Далее нужно создать css таблицу, в которой мы пропишем эффекты движения, для этого достаточно открыть блокнот, и записать в него код:
a.leftmenu {
display:block;
background-image: url(img/button_up_1.png);
background-repeat: no-repeat;
width:239px;
height:45px;
padding: 7px 0px 0px 0px;
}
a.leftmenu:hover {
display:block;
background-image: url(img/button_up_2.png);
background-repeat: no-repeat;
width:239px;
height:45px;
padding: 7px 0px 0px 0px;
}
a.leftmenu - это начальное положение кнопочки, a.leftmenu:hover - конопочка при наведении.
В background-image: url(img/button_up_2.png); вы вписываете адрес где на хосте лежит ваша кнопка, вписать надо в обеих положениях, так же нужно поставить background-repeat: no-repeat; Чтобы фон не повторялся, т.к кнопочку вы ставите как фон. Итак, сохраняем нашу таблицу под именем style.css
Далее создаем html файл. Так же открываем блокнот и пишем стандартную html страничку! Между тегами подключаем нашу таблицу стилей: В теге href прописываем адрес нашей таблицы стилей. Далее заставим нашу кнопочку двигаться: Первым делом вписываем ее на сайт тегом А вторым делом доводим до ума наш html файл и сохраняем его под именем index.html Открываем готовую страницу и "УАЛЯ" Кнопочка двигается так же можно создать 5 и больше кнопочек и получить красивое и простое меню для вашего сайта!
На всякий случай html файл должен выглядеть приблизительно так:
Моя кнопочка
Вместе файлы заставят кнопочку при наведении мыши изменятся!