Social Icons là những công cụ giúp chuyển hướng người đọc sang một trang mạng xã hội như facebook, google+,…của bạn. Với Social Icons vừa tăng tính chuyên nghiệp cho Blog của bạn vừa tăng Traffic giúp người đọc tiếp cận hơn với các bạn !
Hôm nay đây mình sẽ chia sẻ cho các bạn bộ Social Icons với các hiệu ứng khác nhau cho các bạn thoải mái lựa chọn !!
Mình tóm gọn Code cũng như CSS vào một phần để các bạn dễ thêm nhé !
Chia Sẻ Bộ Social Icons Tuyệt Đẹp Cho Blogspot
<section class="s1">
<a href="#" class="iconbtn fab fa-facebook-square"></a>
<a href="#" class="iconbtn fab fa-google-plus"></a>
<a href="#" class="iconbtn fab fa-twitter-square"></a>
<a href="#" class="iconbtn fab fa-instagram"></a>
</section>
<section class="s2">
<a href="#" class="iconbtn fab fa-facebook-square"></a>
<a href="#" class="iconbtn fab fa-google-plus"></a>
<a href="#" class="iconbtn fab fa-twitter-square"></a>
<a href="#" class="iconbtn fab fa-instagram"></a>
</section>
<section class="s3">
<a href="#" class="iconbtn fab fa-facebook-square"></a>
<a href="#" class="iconbtn fab fa-google-plus"></a>
<a href="#" class="iconbtn fab fa-twitter-square"></a>
<a href="#" class="iconbtn fab fa-instagram"></a>
</section>
<section class="s4">
<a href="#" class="iconbtn fab fa-facebook-square"></a>
<a href="#" class="iconbtn fab fa-google-plus"></a>
<a href="#" class="iconbtn fab fa-twitter-square"></a>
<a href="#" class="iconbtn fab fa-instagram"></a>
</section>
<style>
section{
height: 25vh;
display: flex;
justify-content: center;
align-items: center;
}
.s1{
background: #3498db;
}
.s2{
background: #e74c3c;
}
.s3{
background: #2ecc71;
}
.s4{
background: #34495e;
}
.iconbtn{
width: 80px;
height: 80px;
text-decoration: none;
margin: 20px;
position: relative;
font-size: 30px;
border-radius: 50%;
}
.iconbtn::before{
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.iconbtn::after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
z-index: 0;
}
.s1 .iconbtn,.s2 .iconbtn{
color: #fff;
}
.s1 .iconbtn::after{
border: 4px dashed;
}
.s1 .iconbtn:hover::after{
animation: ro 7s linear infinite;
}
.s2 .iconbtn{
border: 4px solid;
}
.s2 .iconbtn:hover{
animation: ro 2s linear infinite;
}
.s3 .iconbtn{
border: 4px solid #fff;
color: #2ecc71;
}
.s3 .iconbtn::after{
background: #fff;
transition: 0.2s;
}
.s3 .iconbtn:hover::after{
transform: scale(.9);
}
.s4 .iconbtn{
border: 4px solid #fff;
color: #34495e;
}
.s4 .iconbtn::after{
background: #fff;
transition: 0.4s;
}
.s4 .iconbtn:hover::after{
transform: scale(1.3);
opacity: 0;
}
.s4 .iconbtn:hover{
color: #fff;
}
@keyframes ro {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
</style>Code trên là với 4 loại hiệu ứng nhé!
Thắc mắc hãy Comment để mình hỗ trợ nhé! Chúc các bạn thành công !!
Đánh giá bài viết
[Total: 1 Average: 5]
