Красивые кнопки с анимацией для WEB сайта

08 июнь 2017
НЕСКОЛЬКО КРАСИВЫХ КНОПОК ДЛЯ ВАШЕГО 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);              //возвращаем второй текст вниз от нуля (он здесь присутствует неявным образом) до величены сдвига
});   

СТАТЬИ О WEB САЙТАХ

Разверните во весь экран.

ИЗ ЖИЗНИ НАСЕКОМЫХ

Мультфильм в 3D

реклама на сайте dvr3d.ru

Поддержать сайт:

Канал YouTube:

Наверх