Простой пример создания анимированной кнопки с помощью CSS и jQuery
Среда, мая 26, 2010 в 1:35Сегодня будем создавать кнопку, при наведении на которую будет происходить эффект затемнения ее другим цветом. Сделать это можно с помощью простых методов CSS и jQuery.
Часть 1. Создаем изображение кнопки в Photoshop
В этой части мы будем с помощью нехитрых способов создавать изображение нашей кнопки. Создаем новый документ Photoshop размером 380 px в ширину и 130 px в высоту, фон документа – прозрачный.
Создадим несколько направляющих по краям холста и посередине по горизонтали. Чтобы точно установить направляющую посередине, выберите View > New Guide и установите горизонтальную ориентацию направляющей, которая будет равняться 65 px.
Как видите, направляющая, разделила холст на две равные половины. Воспользуемся инструментом Rounded Rectangular Tool с радиусом закругления углов 5 px и нарисуем прямоугольник в верхней части холста.
Добавим стили для слоя с кнопкой:
Выберите инструмент Horizontal Type Tool и напишите какой-нибудь текст, например «Регистрация». Итоговый результат будет выглядеть так:
Теперь создадим папку и поместим все слои в нее. Затем создаем копию этой папки и применяем к новой папке следующие стили:.
Изменяем текст кнопки на белый. Используя инструмент Move Tool, перемещаем папку слоев в нижнюю часть холста.
Вот и все! Мы закончили с первой частью. Сохраняем изображение как button.png и теперь можно переходить к написанию кода.
Часть 2. HTML
Шаг 1. Подготовка необходимых файлов.
Создайте папку и назовите ее Анимированная кнопка. В папке создадим следующие файлы:
- Файл index.html
- Файл style.css
- Файл script.js
- Папку images с изображением нашей кнопки
- Файл с изображением кнопки button.png
Шаг 2. Подключаем стили и скрипты в index.html
Подключаем CSS и JavaScript внутри тегов <head></head>.
<link href="style.css" rel="stylesheet" type="text/css" />
Подключаем библиотеку jQuery.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
и последним подключаем файл JavaScript
<script type="text/javascript" src="script.js"></script>
В итоге, ког внутри тегов <head></head> будет выглядеть вот так:
Напишем код для нашей кнопки внутри <body></body>:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<div class="button"><a href="#"></a></div>
Шаг 3. CSS + jQuery
Добавим следующий код в файл style.css:
.button, .button a {
background: url(images/button.png) 0 -65px;
height:65px;
width:380px;
display:block;
}
.button a {
background-position: 0 0;
}
На этом с CSS все. Теперь откройте файл script.js и добавьте в него код, который будет добавлять плавный эффект анимации кнопки:
Вот и все. Если вы сделали все правильно, то у вас должно получиться вот так. Если возникли трудности, то можете написать свои вопросы в комментариях.
$(document).ready(function(){
$('.button a').hover(function(){
$(this).stop().animate({'opacity' : '0'}, 500);
}, function(){$(this).stop().animate({'opacity' : '1'}, 500);});
});
Макся пишет:
16 июня 2010 в 21:37
Привет, а как такую кнопку всунуть, например в страничку, которая написана на php? и там нету ни head ни body
c0yc пишет:
17 июня 2010 в 12:10
Шикарно, спасибо
Буду использовать
Alex пишет:
1 июля 2010 в 13:14
у меня возникла проблемка, вообщем, если переходишь на другую страницу с помощью этой кнопки, и возвращаешья назад то данная кнопка остаётся активной.
Если можете напишите пожалуйста как от этого избавиться.
Administrator пишет:
2 июля 2010 в 10:59
@ Макся:
Ваша php-страничка в любом случае подключается в той, в которой есть и head и body
Administrator пишет:
2 июля 2010 в 11:02
@ Alex:
Что значит остается активной? Опишите, пожалуйста, поподробнее вашу проблему.
Alex пишет:
31 июля 2010 в 14:32
То есть когда возвращаешься к этой кнопке,то эта кнопка синяя(такая же когда наводишт на неё) в сотстоянии hover.
Administrator пишет:
2 августа 2010 в 14:38
@ Alex:
Попоробуйте вернуться к этой кнопке и обновить страницу , на которой расположена эта кнопка