Практически на каждом сайте вы можете вы можете встретить иконки соц. сетей. И по причине распространённости данного элемента, многие сайты анимируют или добавляют эффекы к ним, чтобы сделать данные элементы сайта оригинальными. Смысл данного приёма в том, чтобы посетителю запомнился именно ваш сайт и он захотел ещё к нему вернуться. Иконка соц. сети, как правило, состоит из ссылки и изображения самой соц. сети внутри ссылки. Именно такую иконку мы с вами и сделаем более привлекательной, добавив к ней не сложный, но запоминающийся эффект при наведении.
Для создания иконки вам надо перекопировать следующие часи кодов:
<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>
.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.