Всем привет! В этом уроке я расскажу вам как сделать на CSS кнопку которая будет меняться при наведении и при нажатии. Но для начала давайте поговорим о тех своиствах и тегах которые будем использовать. И так начнем.
Если вы только что начали изучение CSS и еще не знаете язык разметки HTML то прочитайте мой небольшой урок про основные теги HTML который находится тут: http://delphi-lubitel.ucoz.ru/publ/po_html/osnovnye_tegi_html/7-1-0-16
CSS кнопку может быть не только из картинок но и без картинок в этом уроке я решил описать кнопку из картинок нарисуйте либо возьмите 3 картинки либо прочитайте мой небольшой урок в нем описано как в Photoshop нарисовать простенькую кнопку урок находится тут: http://delphi-lubitel.ucoz.ru/publ/po_photoshop/knopka_v_photoshop/5-1-0-14
Теперь давайте разберем те свойства и теги которые будем использовать:
<html> - начало HTML документа <head> - голова HTML документа <title>Кнопка на CSS</title> - заголовок страницы <Style> - в этом теге мы будем писать CSS стили display - в этом свойстве мы говорим как отображать кнопку. width - ширина кнопки height - высота кнопки background - фон
hover - что будет происходить при наведении no-repeat - указываем что картинка не должна повторяться
active - что будет происходить при нажатии url - указываем путь </style> - закрываем тег </head> - закрываем тег
<body> - содержимое HTML документа href="" - ссылка class="" - имя класса для которого мы пишем стили </body> - закрываем тег </html> - закрываем тег
Ну а теперь давайте создадим нашу кнопку: Создаем папку на рабочем столе назовем ее "CSS кнопка" (не обязательно на рабочем столе и название можете написать любое я это написал к примеру) создаем в ней папку с названием "Image" и текстовый документ. В папку "Image" кидаем картинки теперь заходим в текстовый документ и пишем:
<html>
<head> <title>Кнопка на CSS</title> <Style> .btn{ display: block; width: 200px; height: 50px; background: url('image/10.jpg') 0 0px no-repeat; }
.btn:hover{ background: url('image/11.jpg') 0 0px no-repeat; }
.btn:active{ background: url('image/12.jpg') 0 0px no-repeat; }
</style> </head>
<body> <a href="www.delphi-lubitel.ucoz.ru" class="btn"></a> </body>
</html>
Теперь сохраняем жмем: "Файл" ==> "Сохранить как" ==> "Тип файла" ставим "Все файлы" ==> "Имя файла" пишем любое к примеру "index.html" ==> Кодировку ставим "UTF-8" кодировку менять не обязательно теперь жмем "Сохранить". Теперь запускаем файл "index.html" и проверяем все ли работает.
Ну и еще я хочу дополнить к этому уроку как написать CSS меню горизонтальное и вертикальное это сделать не сложно и так начнем давайте изменим наш код.
Начнем с вертикального меню. Менять в коде ничего ненадо просто скопируйте и вставьте строку: <a href="www.delphi-lubitel.ucoz.ru" class="btn"></a> должно выглядеть примерно так:
<a href="www.delphi-lubitel.ucoz.ru" class="btn"></a> <a href="www.delphi-lubitel.ucoz.ru" class="btn"></a> <a href="www.delphi-lubitel.ucoz.ru" class="btn"></a>
В данном результате у нас получиться вертикальное меню. Теперь давайте сделаем горизонтальное меню. Меняем значение свойства display на table-cell
Спасибо за внимание всем пока и до новых встреч
Автор Toha При копировании статьи обязательно ссылка на официальный сайт.
Чтобы скачать нажмите "Перейти" "Пропустить рекламу" | 
