Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Эффект с анимацией при наведении на кнопку при помощи jQuery и CSS3
Дата добавления: 15.12.2020 - 08:24
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 48
Количество комментариев: 0
Размер файла: 3.0 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Необычный, учитывающий направление, эффект наведения, который появляется в зависимости от направления, в котором указатель мыши входит в элемент.
Идеально подходит для создания интерактивной кнопки призыва к действию с использованием небольшого количества JavaScript и CSS/CSS3.
1. Создайте кнопку призыва к действию там, где вы хотите применить эффект пульсации при наведении.
2. Пример CSS для кнопки.
3. Примените стили CSS к эффекту наведения пульсации.
4. JavaScript (сценарий jQuery) для отслеживания события mouseenter и применения эффекта пульсации к кнопке.
Идеально подходит для создания интерактивной кнопки призыва к действию с использованием небольшого количества JavaScript и CSS/CSS3.
Как использовать:
1. Создайте кнопку призыва к действию там, где вы хотите применить эффект пульсации при наведении.
Код
<div class="action-button">
<a href="#">
<span></span>
Button Hover Effect
</a>
</div>
<a href="#">
<span></span>
Button Hover Effect
</a>
</div>
2. Пример CSS для кнопки.
Код
.read-more > a {
border: 2px solid rgb(0, 119, 255);
color: rgb(0, 119, 255);
display: inline-block;
font-size: 1.8rem;
overflow: hidden;
padding: 10px 30px;
position: relative;
text-transform: uppercase;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-ms-transition: 0.5s linear;
-o-transition: 0.5s linear;
transition: 0.5s linear;
}
.read-more > a:hover {
color: #ffffff;
}
border: 2px solid rgb(0, 119, 255);
color: rgb(0, 119, 255);
display: inline-block;
font-size: 1.8rem;
overflow: hidden;
padding: 10px 30px;
position: relative;
text-transform: uppercase;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-ms-transition: 0.5s linear;
-o-transition: 0.5s linear;
transition: 0.5s linear;
}
.read-more > a:hover {
color: #ffffff;
}
3. Примените стили CSS к эффекту наведения пульсации.
Код
.read-more > a > span {
background-color: rgb(0, 119, 255);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
color: #ffffff;
display: block;
height: 0;
position: absolute;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-transition: height 1s, width 1s;
-moz-transition: height 1s, width 1s;
-ms-transition: height 1s, width 1s;
-o-transition: height 1s, width 1s;
transition: height 1s, width 1s;
width: 0;
z-index: -1;
}
.read-more > a:hover > span {
height: 700px;
width: 700px;
}
background-color: rgb(0, 119, 255);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
color: #ffffff;
display: block;
height: 0;
position: absolute;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-transition: height 1s, width 1s;
-moz-transition: height 1s, width 1s;
-ms-transition: height 1s, width 1s;
-o-transition: height 1s, width 1s;
transition: height 1s, width 1s;
width: 0;
z-index: -1;
}
.read-more > a:hover > span {
height: 700px;
width: 700px;
}
4. JavaScript (сценарий jQuery) для отслеживания события mouseenter и применения эффекта пульсации к кнопке.
Код
$(function() {
$(".action-button > a").on('mouseenter', function(e) {
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
$(this).find("span").css({
top: y,
left: x
});
});
$(".action-button > a").on('mouseout', function(e) {
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
$(this).find("span").css({
top: y,
left: x
});
});
});
$(".action-button > a").on('mouseenter', function(e) {
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
$(this).find("span").css({
top: y,
left: x
});
});
$(".action-button > a").on('mouseout', function(e) {
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
$(this).find("span").css({
top: y,
left: x
});
});
});
Поделись с друзьями:
