Наверх

Заливка элемента от точки наведения курсора

Опубликовано:
650
1 2 3 4 5
(100%) / 1

В просторах интернета наткнулся на сайт, где реализован интересный и довольно простой эффект наведения на кнопку. 

 

Живой пример:

 

Суть

  1. Наводим курсор на кнопку
  2. Высчитываем положение курсора относительно кнопки
  3. Исходя из координатов курсора перемещается элемент
  4. Видим эффект заполнения кнопки

 

html разметка

Я подключил библиотеку jquey, потому что мне так удобнее.

<a href="#" class="btn">
	<i class="fa fa-fire-extinguisher" aria-hidden="true"></i>
	<span class="btn_text">Наведите мышкой</span>
	<span class="btn_hover"></span>
</a>

<a href="#" class="btn">
	<i class="fa fa-check" aria-hidden="true"></i>
	<span class="btn_text">В разные места</span>
	<span class="btn_hover"></span>
</a>

<a href="#" class="btn">
	<i class="fa fa-heart-o" aria-hidden="true"></i>
	<span class="btn_text">И еще разок</span>
	<span class="btn_hover"></span>
</a>

 

css

.btn
{
    display: inline-block;
    padding: 12px 55px;
    font-size: 20px;
    line-height: 1.42857143;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    border: 2px solid rgb(255, 255, 255);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn:hover .btn_hover
{
	width: 1000px;
	height: 1000px;	
}

.btn .btn_hover
{
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #50e3c2;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: width .6s, height .6s, background-color .4s;
}

 

javascript

$(function(){
  $(".btn").mouseover(function(e){
    // положение элемента
    var pos = $(this).offset();
    var elem_left = pos.left;
    var elem_top = pos.top;
    // положение курсора внутри элемента
    var Xinner = e.pageX - elem_left;
    var Yinner = e.pageY - elem_top;
		$(this).find(".btn_hover").css({
			"left":Xinner,
			"top":Yinner
		})
  });
});

 

Вот и все. Ничего сложного.

Таким образом мы получили интересный и просто эффект наведения курсора на кнопку под средствами css3 и javascript.

 

Дорогой web-мастер.
Для меня очень важна обратная связь от Вас в виде лайков или рейтинга.
Пожалуйста оцените эту публикацию или поставь лайк за старание.
Статья подготовлена для Вас сайтом kisameev.ru
Перевел: Кисамеев Дмитрий
Статью просмотрели: 650
Понравилось:
Поделится ссылкой
Теги:
Комментариев...
Оставьте его первым.

Для вставки кода используйте комментарии от ВК или FB:

Похожие публикации

Когда я начал изучать эту тему, мне не нужна была трехмерная карусель, но я больше интересовался техническими деталями ее реализации....
С помощью transform свойства CSS3 возможно масштабирование, перекос и поворот любого элемента. Однако это вращает весь элемент и все его содержимое. Что делать, если...

Нашли баг или ошибку?

Выдели текст
мышкой и нажми:
Нашел ошибку