CSS Kısmı
/* social ikon */
.social-ikon {
width: 42px;
text-align: center;
float: right;
margin-right: 15px;
}
.social-ikon a > span {
display: block;
border: 1px solid #ddd;
padding: 7px 0;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #555;
border-radius: 4px;
position: relative;
}
.social-ikon a > span::after {
content: '';
border: 6px solid transparent;
border-top-color: #fff;
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -6px;
}
.social-ikon a > span::before {
content: '';
border: 8px solid transparent;
border-top-color: #ddd;
position: absolute;
bottom: -16px;
left: 50%;
margin-left: -8px;
}
/* hover */
.social-ikon a:hover > span {
border-color: #999;
}
.social-ikon a:hover > span::before {
border-top-color: #999;
}
DEMO