Добавление анимационного эффекта к иконкам соцсетей

Добавление анимационного эффекта к иконкам соцсетей

Owebs
27 мая 2022
Просмотры 96
Рейтинг
Время чтения Время чтения: 4 минуты

Оглавление
Развернуть Свернуть

Создаем иконки социальных сетей с анимацией

 

vk

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

Для создания иконки перекопируйте следующие части кодов:

HTML:
                <a href="#" class="iconbtn">vk</a>
                <a href="#" class="iconbtn"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Instagram-Icon.png/800px-Instagram-Icon.png" alt=""></a>
                <a href="#" class="iconbtn"><img src="https://st.mycdn.me/res/i/ok_logo.png" alt=""></a>
            
CSS:
                .iconbtn {
                    position: relative;
                    width: 40px;
                    height: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    text-decoration: none;
                    font-family: sans-serif;
                    color: rgb(18, 18, 136);
                    font-size: 18px;
                    font-weight: 700;
                    margin: 20px;
                    border-radius: 50%;
                    background-color: #fff;
                    z-index: 1;
                    padding: 15px;
                }
        
                .iconbtn img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    object-position: center;
                }
        
                .iconbtn::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;
                    border-radius: 50%;
                    z-index: 0;
                    background: #fff;
                    transition: 0.5s;
                    z-index: -1;
                }
        
                .iconbtn:hover::after {
                    transform: scale(1.3);
                    opacity: 0;
                }
            

После копирования вышеупомянутых кусков кода у вас должны появиться такие иконки:

vk

При наведении/отведении на них курсора вы увидите добавленный эффект. Все цвета, а также размеры можете изменять по своему желанию через CSS.

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 183
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 344
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 366
Рейтинг 4
9 февраля
3 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

Наш сайт использует куки.
Продолжая им пользоваться, вы соглашаетесь на обработку данных в соответсвии с политикой конфидециальности.

Согласен