<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

Данный курс научит Вас программировать на языке JavaScript, который крайне желательно знать любому уважающему себя программисту. Курс состоит из 8 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности. В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Три эффекта наведения на кнопку

Три эффекта наведения на кнопку

На этом уроке мы разберем три разных эффекта при наведении на кнопку.


HTML разметка

Создадим в разметке три разных блока и и обернем в контейнер с классом wrapper для выравнивания их по центру. Один блок - одна кнопка.

<div class="wrapper">
    <div class="buttonLeft"><span>Left</span></div>
    <div class="buttonOverlay"><span>Center</span></div>
    <div class="pressDown"><span>Right</span></div>
</div>

Замена цвета кнопки при наведении (эффект 1)

Создадим кнопку слева.

.buttonLeft {
    border-radius: 5px; // скругление
    padding: 0 40px; //поля внутри кнопки
    overflow: hidden; // скрыть все что выходит за родителя
    background: #BA7BA1; // цвет кнопки
    position: relative; // установим позицию родителя
    line-height: 40px;
    color: #fff; // цвет текста
    margin-right: 40px; // промежуток между кнопками
}

В качестве заполнения кнопки другим цветом, будет служить псевдоэлемент before. Однако увидеть, как происходит плавная замена одного цвета на другой, можно будет только при наведении на кнопку. Весь фокус состоит в трансформации псевдоэлемента before: из невидимой (-100%) позиции в состоянии покоя в видимую (0) при наведении.

.buttonLeft::before {
    content: '';
    position: absolute; // позиционировать относительно родителя
    left: 0; // координата псевдоэлемента
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%); // прячем псевдоэлемент за родителем
    background: #EC008C; // новый цвет
    transition: transform .2s ease-in-out; // плавная анимация
}

.buttonLeft:hover::before {
    transform: translateX(0); // показываем псевдоэлемент
}

.buttonLeft span {
    position: relative;
    z-index: 1; // текст сверху
}


Три эффекта наведения на кнопку.

Изменение положения кнопки при наведении (эффект 2)

При наведении мыши на центральную кнопку, нужно выпавшую кнопку вернуть обратно в рамку.

// задаем позиционирование
.buttonOverlay {
    padding: 10px 25px;
    position: relative;
    color: #fff;
    margin-right: 40px;
}

// рисуем выпавшую кнопку
.buttonOverlay::before {
    content: '';
    position: absolute;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    top: 5px;
    right: 5px;
    background-color: #BA7BA1;
    z-index: -1;
    transition: transform .2s ease-in-out;
}

// рисуем пустую рамку
.buttonOverlay::after {
    content: '';
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #EC008C;
}

// при наведении возвращаем кнопку в свою рамку
.buttonOverlay:hover::before {
    transform: translate(6px, -4px);
}


Три эффекта наведения на кнопку.

Нажатая вниз кнопка при наведении (эффект 3)

Этот эффект напоминает сжатую пружину при наведении мыши. Когда мы уводим мышь с кнопки, то пружина отжимается. Весь секрет в обнулении толщины нижней рамки при наведении.

.pressDown {
    background-color: #BA7BA1;
    padding: 10px 30px;
    color: #fff;
    border-radius: 5px;
    border-bottom: 4px solid #EC008C;
    transition: 0.1s;
}

.pressDown:hover{
    border-bottom-width: 0; // обнуление толщины рамки
    margin-top: 3px;
}


Три эффекта наведения на кнопку.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.