Красивый и необычный эффект при наведении на кнопку — переворот кнопки с появлением соцкнопок.
HTML
<div class="container">
<div class="button">
<div class="front">
Share
</div>
<div class="right">
<a href="#">
<i class="fa fa-twitter"></i>
</a>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
<a href="#">
<i class="fa fa-pinterest-p"></i>
</a>
</div>
</div>
</div>
CSS
.container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
perspective: 500px;
-webkit-perspective: 500px;
perspective-origin: 50%;
-webkit-perspective-origin: 50%;
}
.button {
height: 80px;
width: 200px;
position: relative;
transition: .5s;
transform-style: preserve-3d;
}
.button:hover {
transform: rotateY(-90deg);
}
.front,
.right {
background: white;
height: 100%;
width: 100%;
position: absolute;
}
.front {
transform: translateZ(100px);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
font-weight: 600;
letter-spacing: 1.7px;
color: #000022;
font-size: 28px;
cursor: pointer;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
display: flex;
align-items: center;
justify-content: space-around;
}
a {
text-decoration: none;
display: flex;
height: 40px;
width: 40px;
align-items: center;
justify-content: center;
border-radius: 3px;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
transition: .2s;
}
a:hover {
transform: scale(1.15);
}
a:nth-child(1) {
background: #22acfe;
}
a:nth-child(2) {
background: #3f68c0;
}
a:nth-child(3) {
background: #ea3145;
}
i.fa {
color: #ffffff;
font-size: 25px;
}
