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.