Красивые кнопки с анимацией для WEB сайта
08 июнь 2017- Информация о материале
- Автор: Долматов Вячеслав
- Просмотров: 4035
НЕСКОЛЬКО КРАСИВЫХ КНОПОК ДЛЯ ВАШЕГО WEB САЙТА.
Если Вы желаете установить любую из этих кнопок на Ваш WEB сайт, то перейдите к подробному описанию и посмотрите как это можно сделать.
Что бы понять, как организована структура кода кнопок скачайте RAR-архив с готовым конечным результатом и посмотрите как всё организовано. Там всё просто. Запускаете в браузере файл ‘index.html’ и смотрите на конечный результат.
Вы так же можете посмотреть видеоинструкцию как работать с кодами кнопок, если формат видео для Вас более понятен.
Весь код распределён по трём файлам, это:
index.html – здесь находится код HTML
mystyle.css – здесь находится код CSS
myscript.js – здесь находится код JQuery
Если Вы раскроете свиток ‘Показать/скрыть описание’, то именно эту структуру для каждой отдельной кнопки Вы и увидите.Все скрипты, таблица стилей и шрифт 'Font Awesome' подключены в файле index.html в обычном порядке (между тегами <head></head>). Как видите, структура организации файлов и их подключения стандартная и, надеюсь, не вызовет никаких затруднений. Если что то будет непонятно, то пишите. Постараюсь помочь.
P.S. Со временем количество кнопок будет увеличиваться.
<!-- HTML -->
<a class="niceButton-myhref-01" href="http://www.3dstudiomax.ru/" target="_blank"> <!-- Делаем кнопку ссылкой -->
<div class="niceButton-color-button-01"> <!-- Контейнер для цвета фона кнопки -->
<div class="niceButton-text-button-01">Первая <span>КНОПКА</span></div> <!-- Контейнер для текста кнопки -->
<div class="niceButton-img-button-01"></div> <!-- Контейнер для изображения кнопки-->
</div>
</a>
/*-- CSS --*/
.niceButton-myhref-01 {
text-decoration: none; /*убираем подчеркивание на ссылке*/
border: none; /*убираем след от клика по кнопке (требуется не для всех браузеров)*/
outline: none; /*убираем след от клика по кнопке (требуется не для всех браузеров)*/
display: inline-block; /*Делаем так что бы размеры кнопки не занимали всю строку*/
}
.niceButton-color-button-01 {
background: #2c7ffb; /*Устанавливаем цвет фона кнопки*/
border-radius: 5px; /*Радиус скругления углов кнопки*/
position: relative; /*Задаём возможность регулировки изображения '3D' по высоте и ширине кнопки*/
}
.niceButton-img-button-01 { /*Устанавливаем стили для изображения '3D'*/
width: 22px; /*ширина изображения '3D'*/
height: 22px; /*высота изображения '3D'*/
background-image: url(../img/logo-3D-2.png); /*ссылка на изображение '3D'*/
position: absolute; /*точное позиционирование изображения '3D'*/
top: 7px; /*позиционирование по высоте*/
left: 7px; /*позиционирование по ширине*/
}
.niceButton-text-button-01 { /*стили для текста кнопки*/
font: 14px Arial, sans-serif;
padding: 10px 20px 10px 35px;
color: #ccc;
}
.niceButton-text-button-01 span{ /*стили для текста кнопки обвернутого в тег */
color: #fff;
font-weight: bold;
}
/*-- JQuery --*/
jQuery('.niceButton-color-button-01').hover(function(){ //При наведении курсора на кнопку:
jQuery('.niceButton-img-button-01').css({'background-position':'0 -22px', 'transition':'all 0.4s'}); //меняем позицию изображения '3D'
jQuery('.niceButton-text-button-01').css({'color':'#fff', 'transition':'all 0.4s'}); //меняем цвет текста кнопки
jQuery('.niceButton-text-button-01 span').css({'color':'#FFE53B', 'transition':'all 0.4s'}); //меняем цвет текста кнопки обвернутого в тег ''
}, function(){ //При уходе курсора с кнопки:
jQuery('.niceButton-img-button-01').css({'background-position':'0 0', 'transition':'all 0.4s'}); //возвращаем позицию изображения '3D'
jQuery('.niceButton-text-button-01').css({'color':'#ccc', 'transition':'all 0.4s'}); //возвращаем цвет текста кнопки на тот который был
jQuery('.niceButton-text-button-01 span').css({'color':'#ffffff', 'transition':'all 0.4s'}); //возвращаем цвет текста кнопки обвернутого в тег '' на тот который был
});
<!-- HTML -->
<!-- здесь библиотека 'JQuery' не используется -->
<!-- конверт делаем используя шрифт 'Font Awesome' -->
<a class="niceButton-myhref-02" href="http://www.3dstudiomax.ru/" target="_blank"> <!-- Делаем кнопку ссылкой -->
<div class="niceButton-color-default-02"> <!-- Контейнер для цвета фона кнопки -->
<div class="niceButton-text-button-02">Вторая кнопка</div> <!-- Контейнер для текста кнопки -->
</div>
</a>
/*-- CSS --*/
.niceButton-myhref-02 {
text-decoration: none; /*убираем подчеркивание на ссылке*/
border: none; /*убираем след от клика по кнопке*/
outline: none; /*убираем след от клика по кнопке*/
display: inline-block; /*делаем так что бы размеры кнопки не занимали всю строку*/
}
.niceButton-color-default-02 {
background: #2c7ffb; /*Устанавливаем цвет фона кнопки*/
border-radius: 5px; /*радиус скругления углов кнопки*/
transition: 0.4s; /*время перехода от состояния 'hover' в обычное состояние*/
}
.niceButton-text-button-02 { /*стили для текста кнопки*/
font: 14px Arial, sans-serif;
padding: 10px 24px;
color: #ff0;
transition: 0.4s; /*время перехода от состояния 'hover' в обычное состояние*/
}
.niceButton-text-button-02::before { /*устанавливаем стили для шрифта 'Font Awesome'*/
content: "\f0e0"; /*помещаем на кнопку конверт*/
font-family: FontAwesome; /*в качестве конверта используем шрифт 'Font Awesome'*/
color: #ff0; /*цвет конверта по умолчанию*/
font-size: 14px; /*размер конверта*/
margin-right: 7px; /*положение конверта относительно текста по горизонтали*/
transition: 0.4s; /*время перехода от состояния 'hover' в обычное состояние*/
}
.niceButton-text-button-02:hover { /*цвет текста кнопки при наведении на неё мыши*/
color: #fff;
transition: 0.4s;
}
.niceButton-color-default-02:hover { /*цвет фона кнопки при наведении на неё мыши*/
background: #BB162B;
transition: 0.4s;
}
.niceButton-text-button-02:hover::before { /*цвет конверта при наведении на него мыши*/
color: #fff;
transition: 0.4s;
}
<!-- HTML -->
<a class="niceButton-myhref-03" href="http://www.3dstudiomax.ru/" target="_blank"> <!-- Делаем кнопку ссылкой -->
<div class="niceButton-color-default-03"> <!-- Контейнер для цвета фона кнопки -->
<div class="niceButton-color-hover-03"></div> <!-- Контейнер для цвета фона при наведении курсора -->
<div class="niceButton-text-button-03">Третья кнопка</div> <!-- Контейнер для текста кнопки -->
</div>
</a>
/*-- CSS --*/
.niceButton-color-default-03 { /*стили для кнопки по умолчанию*/
background-color: #2c7ffb;
border-radius: 5px;
position: absolute;
display: block;
}
.niceButton-color-hover-03 { /*Стили для кнопки при наведении на неё курсора*/
background-color: #f00; /*изначально ширина равна нулю, а постепенное изменение ширины и появление красного фона прописано в 'JQuery'*/
border-radius: 5px;
position: absolute;
display: block;
}
.niceButton-text-button-03 { /*Стили для текста кнопки*/
font: 14px Arial, sans-serif;
color: #ffff00;
padding: 10px 35px;
position: relative; /*что бы не исчезал текст при наведении курсора*/
}
/*-- JQuery --*/
var niceButtonWidthButton03 = jQuery('.niceButton-color-default-03').width(); //узнаём какова изначальная ширина кнопки
var niceButtonHeightButton03 = jQuery('.niceButton-color-default-03').height(); //узнаём какова изначальная высота кнопки
jQuery('.niceButton-color-hover-03').width(niceButtonWidthButton03).height(niceButtonHeightButton03); //устанавливаем значения ширины и высоты для контейнера с анимацией такими же как у контейнера по умолчанию
jQuery('.niceButton-color-hover-03').width ('0'); //изначально устанавливаем ширину анимированной кнопки равной нулю
jQuery('.niceButton-color-default-03').hover(function(){ //при наведении курсора на кнопку:
jQuery('.niceButton-color-hover-03').animate({'width' : niceButtonWidthButton03}, 300); //меняем ширину кнопки с нуля до требуемого значения
jQuery('.niceButton-text-button-03').css({'color':'#fff', 'transition':'all 0.3s'}); //меняем цвет текста
}, function(){ //при уходе курсора с кнопки:
jQuery('.niceButton-color-hover-03').animate({'width' : '0px'}, 300); //ширину анимированной кнопки уменьшаем до нуля (т.е. делаем её невидимой)
jQuery('.niceButton-text-button-03').css({'color':'#ffff00', 'transition':'all 0.3s'}); //возвращаем обратно цвет текста кнопки на тот который был
});
<!-- HTML --> <a class="niceButton-myhref-04" href="http://www.3dstudiomax.ru/" target="_blank"> <!-- Делаем кнопку ссылкой --> <div class="niceButton-color-default-04"> <!-- Контейнер для цвета фона кнопки --> <div class="niceButton-color-hover-04"></div> <!-- Контейнер для цвета фона при наведении курсора --> <div class="niceButton-text-button-04">Четвёртая кнопка</div> <!-- Контейнер для текста кнопки --> </div> </a>
/*-- CSS --*/
.niceButton-color-default-04 { /*Стили для кнопки по умолчанию*/
background-color: #2c7ffb;
border-radius: 5px;
position: absolute;
display: block;
}
.niceButton-color-hover-04 { /*Стили для кнопки при наведении на неё курсора*/
background-color: #f00; /*изначально ширина равна нулю, а постепенное изменение ширины и появление красного фона прописано в 'JQuery'*/
border-radius: 5px;
position: absolute;
display: block;
}
.niceButton-text-button-04 { /*Стили для текста кнопки*/
font: 14px Arial, sans-serif;
color: #ffff00;
padding: 10px 24px;
position: relative; /*что бы не исчезал текст при наведении курсора*/
}
/*-- JQuery --*/
var widthButton04 = jQuery('.niceButton-color-default-04').width(); //узнаём какова изначальная ширина кнопки
var heightButton04 = jQuery('.niceButton-color-default-04').height(); //узнаём какова изначальная высота кнопки
jQuery('.niceButton-color-hover-04').width(widthButton04).height(heightButton04);//устанавливаем значения ширины и высоты для контейнера с анимацией такими же как у контейнера по умолчанию
jQuery('.niceButton-color-hover-04').width ('0'); //изначально устанавливаем ширину контейнера с анимацией равной нулю
jQuery('.niceButton-color-hover-04').css({'margin-left':widthButton04}); //смещаем положение контейнера с анимацией вправо на величену его ширины
jQuery('.niceButton-color-default-04').hover(function(){ //при наведении курсора на кнопку:
jQuery('.niceButton-color-hover-04').animate({'width' : widthButton04, 'margin-left':'0'}, 300); //меняем ширину контейнера с анимацией с нуля до требуемого значения и одновременно уменьшаем сдвиг слева до нуля
jQuery('.niceButton-text-button-04').css({'color':'#fff', 'transition':'all 0.3s'}); //меняем цвет текста кнопки
}, function(){ //при уходе курсора с кнопки:
jQuery('.niceButton-color-hover-04').animate({'width' : '0px', 'margin-left':widthButton04}, 300); //ширину контейнера с анимацией уменьшаем до нуля и одновременно увеличиваем сдвиг слева до требуемого значения
jQuery('.niceButton-text-button-04').css({'color':'#ffff00', 'transition':'all 0.3s'}); //возвращаем обратно цвет текста кнопки на тот который был
});
<!-- HTML -->
<a class="niceButton-myhref-05" href="http://www.3dstudiomax.ru/" target="_blank"> <!-- Делаем кнопку ссылкой -->
<div class="niceButton-color-default-05"> <!-- Контейнер для цвета фона кнопки -->
<div class="niceButton-color-hover-05"></div> <!-- Контейнер для цвета фона при наведении курсора -->
<div class="niceButton-text-button-05">Пятая кнопка</div> <!-- Контейнер для текста кнопки -->
</div>
</a>
/*-- CSS --*/
.niceButton-color-default-05 { /*Стили для кнопки по умолчанию*/
background-color: #2c7ffb;
border-radius: 5px;
position: absolute;
display: block;
}
.niceButton-color-hover-05 { /*Стили для кнопки при наведении на неё курсора*/
background-color: #f00; /*изначально ширина равна нулю, а постепенное изменение ширины и появление красного фона прописано в 'JQuery'*/
border-radius: 5px;
position: absolute;
display: block;
}
.niceButton-text-button-05 { /*Стили для текста кнопки*/
font: 14px Arial, sans-serif;
color: #ffff00;
padding: 10px 38px;
position: relative; /*что бы не исчезал текст при наведении курсора*/
}
/*-- JQuery --*/
var widthButton05 = jQuery('.niceButton-color-default-05').width(); //узнаём какова изначальная ширина кнопки
var heightButton05 = jQuery('.niceButton-color-default-05').height(); //узнаём какова изначальная высота кнопки
jQuery('.niceButton-color-hover-05').width(widthButton05).height(heightButton05); //устанавливаем значения ширины и высоты для контейнера с анимацией такими же как у контейнера по умолчанию
jQuery('.niceButton-color-hover-05').height ('0'); //изначально устанавливаем ширину контейнера с анимацией равной нулю
jQuery('.niceButton-color-default-05').hover(function(){ //при наведении курсора на кнопку:
jQuery('.niceButton-color-hover-05').animate({'height' : heightButton05}, 300); //меняем высоту контейнера с анимацией с нуля до требуемого значения
jQuery('.niceButton-text-button-05').css({'color':'#fff', 'transition':'all 0.3s'}); //меняем цвет текста кнопки
}, function(){ //при уходе курсора с кнопки:
jQuery('.niceButton-color-hover-05').animate({'height' : '0px'}, 300); //высоту контейнера с анимацией уменьшаем до нуля (т.е. делаем его невидимым)
jQuery('.niceButton-text-button-05').css({'color':'#ffff00', 'transition':'all 0.3s'}); //возвращаем обратно цвет текста кнопки на тот который был
});
<!-- HTML -->
<a class="niceButton-myhref-06" href="http://www.3dstudiomax.ru/" target="_blank"> <!-- Делаем кнопку ссылкой -->
<div class="niceButton-color-default-06"> <!-- Контейнер для цвета фона кнопки -->
<div class="niceButton-color-hover-06"></div> <!-- Контейнер для цвета фона при наведении курсора -->
<div class="niceButton-text-button-06">Шестая кнопка</div> <!-- Контейнер для текста кнопки -->
</div>
</a>
/*-- CSS --*/
.niceButton-color-default-06 { /*Стили для кнопки по умолчанию*/
background-color: #2c7ffb;
border-radius: 5px;
position: absolute;
display: block;
}
.niceButton-color-hover-06 { /*Стили для кнопки при наведении на неё курсора*/
background-color: #f00; /*изначально ширина равна нулю, а постепенное изменение ширины и появление красного фона прописано в 'JQuery'*/
border-radius: 5px;
position: absolute;
display: block;
}
.niceButton-text-button-06 { /*Стили для текста кнопки*/
font: 14px Arial, sans-serif;
color: #ffff00;
padding: 10px 33px;
position: relative; /*что бы не исчезал текст при наведении курсора*/
}
/*-- JQuery --*/
var widthButton06 = jQuery('.niceButton-color-default-06').width(); //узнаём какова изначальная ширина кнопки
var heightButton06 = jQuery('.niceButton-color-default-06').height(); //узнаём какова изначальная высота кнопки
jQuery('.niceButton-color-hover-06').width(widthButton06).height(heightButton06); //устанавливаем значения ширины и высоты для контейнера с анимацией такими же как у контейнера по умолчанию
jQuery('.niceButton-color-hover-06').height ('0'); //изначально устанавливаем высоту контейнера с анимацией равной нулю
jQuery('.niceButton-color-hover-06').css({'margin-top':heightButton06}); //смещаем положение контейнера с анимацией вниз на величену его высоты
jQuery('.niceButton-color-default-06').hover(function(){ //при наведении курсора на кнопку:
jQuery('.niceButton-color-hover-06').animate({'height' : heightButton06, 'margin-top':'0'}, 300); //меняем высоту контейнера с анимацией с нуля до требуемого значения, а так же уменьшаем значение 'margin-top' до нуля
jQuery('.niceButton-text-button-06').css({'color':'#fff', 'transition':'all 0.3s'}); //меняем цвет текста кнопки
}, function(){ //при уходе курсора с кнопки:
jQuery('.niceButton-color-hover-06').animate({'height' : '0px', 'margin-top':heightButton06}, 300); //высоту контейнера с анимацией уменьшаем до нуля и одновременно увеличиваем 'margin-top' до требуемого значения
jQuery('.niceButton-text-button-06').css({'color':'#ffff00', 'transition':'all 0.3s'}); //возвращаем обратно цвет текста кнопки на тот который был
});
<!-- HTML -->
<a class="niceButton-myhref-07" href="http://www.3dstudiomax.ru/" target="_blank"> <!-- Делаем кнопку ссылкой -->
<div class="niceButton-color-default-07"> <!-- Контейнер для цвета фона кнопки -->
<div class="niceButton-hidden-07"> <!-- Контейнер имеет свойство 'overflow: hidden;', своими размерами он ограничивает расходящийся по экрану круг -->
<div class="niceButton-circle-07"></div> <!-- контейнер для круга, параметры заданы в таблице стилей, а при наведении курсора они меняются (все изменения описаны в 'JQuery') -->
<div class="niceButton-text-button-07">Седьмая кнопка</div> <!-- Контейнер для текста кнопки -->
</div>
</div>
</a>
/*-- CSS --*/
.niceButton-color-default-07 { /*стили для кнопки по умолчанию*/
background-color: #2c7ffb;
border-radius: 5px;
position: absolute;
display: block;
}
.niceButton-hidden-07 { /*контейнер ограничичивающий видимость увеличивающегося круга своими размерами */
position: relative;
overflow: hidden;
}
.niceButton-circle-07 { /*контейнер в котором находится круг, расходящийся по кнопке*/
width: 0px; /*изначально ширина увеличивающегося круга равна нулю, а при наведении курсора мыши на кнопку начинается процесс описанный в 'JQuery'*/
height: 0px; /*изначально высота увеличивающегося круга равна нулю, а при наведении курсора мыши на кнопку начинается процесс описанный в 'JQuery'*/
border-radius: 0px; /*изначально 'border-radius' равен нулю, при наведении курсора этот параметр меняется см. в 'JQuery'*/
background-color: #1E3DB9; /*цвет увеличивающегося круга*/
opacity: 0.3; /*изначальное значение 'opacity' для круга, при наведении курсора этот параметр постепенно менятся до нуля см. 'JQuery'*/
position: absolute;
}
.niceButton-text-button-07 { /*стили для текста кнопки*/
font: 14px Arial, sans-serif;
color: #ffff00;
padding: 10px 28px;
}
/*-- JQuery --*/
var widthButton07 = jQuery('.niceButton-color-default-07').width(); //узнаём какова изначальная ширина кнопки
var heightButton07 = jQuery('.niceButton-color-default-07').height(); //узнаём какова изначальная высота кнопки
var positionX = widthButton07 / 2; //вычисляем значение начальной точки расхождения круга по ширине(оно равно ровно половине от ширины кнопки)
var positionY = heightButton07 / 2; //вычисляем значение начальной точки расхождения круга по высоте(оно равно ровно половине от высоты кнопки)
var slidePositionY = 0 - positionX + positionY; //вычисляем значение сдвига по высоте (по оси Y) по мере увеличения круга, что бы круг все время находился в центре кнопки
jQuery('.niceButton-hidden-07').width(widthButton07).height(heightButton07); //устанавливаем значение ширины и высоты контейнера, выход за пределы которого, будет не виден
jQuery('.niceButton-circle-07').css({'left':positionX, 'top':positionY}); //устанавливаем положение центра разлетающегося круга по ширине и высоте
jQuery('.niceButton-color-default-07').hover(function(){ //при наведении курсора на кнопку:
jQuery('.niceButton-text-button-07').css({'color':'#2c7ffb', 'transition':'all 0.1s'}); //первое изменение цвета у текста кнопки
setTimeout("jQuery('.niceButton-text-button-07').css({'color':'#ffffff', 'transition':'all 0.4s'});", 250); //второе изменение цвета у текста кнопки
jQuery('.niceButton-circle-07').animate({'width' : widthButton07, 'height' : widthButton07, 'border-radius' : widthButton07, 'top' : slidePositionY, 'left' : '0px', 'opacity':'0'}, 500); //ниже дано полной описание всего того, что здесь происходит
}, function(){ //при уходе курсора с кнопки:
jQuery('.niceButton-text-button-07').css({'color':'#ffff00', 'transition':'all 0.3s'}); //возвращаем обратно цвет текста кнопки на тот который был
jQuery('.niceButton-circle-07').animate({'width':'0px', 'height':'0px', 'border-radius' : '0px', 'top':positionY, 'left':positionX, 'opacity':'0.3'}, 0); //возвращаем все параметры круга в изначальное состояние
});
/*В строке:
jQuery('.niceButton-circle-07').animate({'width' : widthButton07, 'height' : widthButton07, 'border-radius' : widthButton07, 'top' : slidePositionY, 'left' : '0px', 'opacity':'0'}, 500);
за время указанное в анимации происходят следующие события:
1. меняем размер круга (ширину и высоту)с нуля до размеров ширины кнопки
2. меняем параметр 'border-radius' с нуля до до размеров ширины кнопки, это необходимо для того, что бы мы получили расползающийся круг, а не квадрат
3. Для того, что бы расползающийся круг все время находился по центру кнопки подставляем параметры 'top' и 'left'
при этом 'left' - должен быть равен нулю, а позиция 'top' - вычисляется учитывая ширину и высоту кнопки (задана в переменной 'slidePositionY')
4. что бы круг по мере увеличения постепенно исчезал меняем его прозрачность до нуля
*/
<!-- HTML -->
<div class="niceButton-fon-button-08"> <!-- контейнер в котором находится всё содержимое кнопки -->
<a class="niceButton-myhref-08" href="http://www.3dstudiomax.ru/" target="_blank"> <!-- делаем кнопку ссылкой -->
<div class="niceButton-hidden-08"> <!-- контейнер, выход контента за пределы которого - будет не виден -->
<div class="niceButton-text1-button-08">Восьмая кнопка</div> <!-- текст на кнопке, который будет исчезать вверх -->
<div class="niceButton-text2-button-08">Восьмая кнопка</div> <!-- текст на кнопке, который будет появляться снизу -->
</div>
</a>
</div>
/*-- CSS --*/
.niceButton-fon-button-08 a{
border: none; /*убираем след от клика по кнопке (требуется не для всех браузеров)*/
outline: none; /*убираем след от клика по кнопке (требуется не для всех браузеров)*/
}
.niceButton-hidden-08 { /*некоторые параметры этого свойства являются настраиваемыми, их нужно подгонять под размер шрифта текста данной кнопки*/
width: 110px; /*ширина блока - НАСТРАИВАЕМЫЙ ПАРАМЕТР, ЕГО РАЗМЕР МОЖЕТ МЕНЯТЬСЯ И ДОЛЖЕН ПОДГОНЯТЬСЯ ПОД РАЗМЕР ТЕКСТА КНОПКИ*/
height: 20px; /*высота блока - НАСТРАИВАЕМЫЙ ПАРАМЕТР, ЕГО РАЗМЕР МОЖЕТ МЕНЯТЬСЯ И ДОЛЖЕН ПОДГОНЯТЬСЯ ПОД РАЗМЕР ТЕКСТА КНОПКИ*/
padding: 10px 27px 8px 27px; /*НАСТРАИВАЕМЫЙ ПАРАМЕТР, ЗДЕСЬ ВЕЛИЧИНЫ ОТСТУПОВ ВЛИЯЮТ НА РАЗМЕР КНОПКИ, НА ТОТ СЛУЧАЙ, ЕСЛИ ФОН КНОПКИ БУДЕТ
НЕ ПРОЗРАЧНЫЙ - УВЕЛИЧИВАЕТ РАЗМЕР КНОПКИ, ДОБАВЛЯЯ СООТВЕТСТВУЮЩИЕ ПОЛЯ К ЗАДАННЫМ ПАРАМЕТРАМ 'width' и 'height'*/
background: #2c7ffb; /*ФОН КНОПКИ - НЕОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР, ЕСЛИ ЕГО НЕ ЗАДАТЬ, ТО ФОН КНОПКИ БУДЕТ ПРОЗРАЧНЫМ*/
/*border: 1px solid #000;*/ /*БОРДЮР ВОКРУГ КНОПКИ - ПОМОГАЕТ В ПРОЦЕССЕ ПОДГОНКИ ПАРАМЕТРОВ 'width' и 'height' ПОД РАЗМЕР КНОПКИ, НЕОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР*/
border-radius: 5px; /*элемент дизайна, ни на что не влияет*/
overflow: hidden; /*скрываем всё что будет выходить за размеры этого блока заданных в параметрах 'width' и 'height'*/
display: inline-block; /*делаем так что бы размеры кнопки не занимали всю строку*/
position: relative; /*без этого свойства 'overflow: hidden' не сработает*/
}
.niceButton-text1-button-08 { /*стили для текста кнопки, который будет исчезать вверх*/
font: 14px Arial, sans-serif;
color: #ffff00;
position: absolute;
}
.niceButton-text2-button-08 { /*стили для текста кнопки, который будет появляться снизу (должны совпадать со стилями для текста который будет исчезать вверх*/
font: 14px Arial, sans-serif;
position: absolute;
color: #fff;
}
/*-- JQuery --*/
var niceButtonmarginTopText2_08 = parseFloat (jQuery('.niceButton-hidden-08').css('height')); //узнаём высоту контейнера заданного в CSS для класса '.niceButton-hidden-08'
var niceButtonpaddingTopText2_08 = parseFloat (jQuery('.niceButton-hidden-08').css('padding-top')); //узнаём величену свойства 'padding-top' заданного в CSS для класса '.niceButton-hidden-08'
var niceButtonpaddingBottomText2_08 = parseFloat (jQuery('.niceButton-hidden-08').css('padding-bottom')); //узнаём величену свойства 'padding-bottom' заданного в CSS для класса '.niceButton-hidden-08'
var niceButtonshifText08 = niceButtonmarginTopText2_08 + niceButtonpaddingTopText2_08 + niceButtonpaddingBottomText2_08; //вычисляем сумму всех трёх найденных ранее величин, она и будет являться величеной сдвига обоих тестов кнопки
jQuery('.niceButton-text2-button-08').css({'margin-top' : niceButtonshifText08}); //уводим второй текст вниз на найденную величену сдвига
jQuery('.niceButton-hidden-08').hover(function(){ //при наведении курсора на кнопку:
jQuery('.niceButton-text1-button-08').animate({'margin-top' : 0 - niceButtonshifText08}, 400); //сдвигаем первый текст вверх (величина сдвига отрицательная)
jQuery('.niceButton-text2-button-08').animate({'margin-top' : '0'}, 400); //сдвигаем второй текст вверх (от величены сдвига до нуля)
}, function(){ //при уходе курсора с кнопки:
jQuery('.niceButton-text1-button-08').animate({'margin-top' : '0'}, 400); //возвращаем первый текст вниз с величены сдвига (он здесь присутствует неявным образом) до нуля
jQuery('.niceButton-text2-button-08').animate({'margin-top' : niceButtonshifText08}, 400); //возвращаем второй текст вниз от нуля (он здесь присутствует неявным образом) до величены сдвига
});
