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

Owebs

27 мая 2022

Время чтения: 3 минуты

Оглавление

Развернуть Свернуть

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

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

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

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

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;
                }

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

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

Поделиться статьей:

Owebs