Chia Sẻ Social Icons Button Cho Blogspot
Tiếp một bài viết nữa về Blogspot, hôm nay mình xin chia sẻ các bạn bộ code Social Icons Button khá đẹp bằng CSS.
CSS: Thêm đoạn CSS này dưới thẻ ]]></b:skin>
.middle{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.btn{
display: inline-block;
width: 90px;
height: 90px;
background: #f1f1f1;
margin: 10px;
border-radius: 30%;
box-shadow: 0 5px 15px -5px #00000070;
color: #3498db;
overflow: hidden;
position: relative;
}
.btn i{
line-height: 90px;
font-size: 26px;
transition: 0.2s linear;
}
.btn:hover i{
transform: scale(1.3);
color: #f1f1f1;
}
.btn::before{
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #3498db;
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.btn:hover::before{
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
@keyframes aaa {
0%{
left: -110%;
top: 90%;
}50%{
left: 10%;
top: -30%;
}100%{
top: -10%;
left: -10%;
}
}
Thêm đoạn CODE này vào nơi bạn muốn nó hiển thị<div class="middle"> <a class="btn" href="#"><i class="fab fa-facebook-f"></i></a> <a class="btn" href="#"><i class="fab fa-twitter"></i></a> <a class="btn" href="#"><i class="fab fa-google"></i></a> <a class="btn" href="#"><i class="fab fa-instagram"></i></a> <a class="btn" href="#"><i class="fab fa-youtube"></i></a> </div>Nếu có gì thắc mắc hãy Comments để mình hỗ trợ nhé.
