<div class="share-container">
<div class="share-flip-div">
<div class="share-front">
<i class="fas fa-share-alt"></i> Share This Page
</div>
<div class="share-back">
<a href="https://api.whatsapp.com/send?text=Hi">
<i class="fab fa-whatsapp"></i>
</a>
<a href="https://www.facebook.com/Mr.PawanMall/">
<i class="fab fa-facebook"></i>
</a>
<a href="https://telegram.me/share/url?url=url&text=text">
<i class="fab fa-telegram"></i>
</a>
<a href="https://in.pinterest.com/pawanmall">
<i class="fab fa-pinterest"></i>
</a>
<a href="mailto:?body=text">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
</div>.share-container {
margin: 20% auto;
perspective: 1000;
transform-style: preserve-3d;
}
.share-container, .share-front, .share-back {
width: 300px;
height: 60px;
}
.share-container:hover .share-back {
transform: rotateY(0deg);
}
.share-container:hover .share-front {
transform: rotateY(180deg);
}
.share-front, .share-back {
border:2px solid #CCC;
border-radius:10px;
line-height:60px;
text-align:center;
background:#EEE;
box-shadow:0 0 2px #aaa;
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.share-flip-div {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.share-front {
z-index: 2;
color:#666;
text-shadow:0 0 3px #fff;
font-size:1.3em;
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
transform: rotateY(0deg);
}
.share-back {
transform: rotateY(-180deg);
}
.share-back a{
text-decoration: none;
font-size:30px;
}
.share-back a{
padding: 50px 10px;
}
.share-back img {
vertical-align:middle;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.