web-html5-scripts/buttons/social-media-buttons/style.css

69 lines
907 B
CSS
Raw Normal View History

body {
padding: 0;
margin: 0;
}
.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%;
}
}