vk
Назад»/Все статьи»

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

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.