HTML
<div class="outer">
<span class="inner" href="#">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</span>
<span class="inner" href="#">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</span>
<span class="inner" href="#">
<i class="fa fa-pinterest-square" aria-hidden="true"></i>
</span>
<span class="inner" href="#">
<i class="fa fa-tumblr-square" aria-hidden="true"></i>
</span>
</div>
SCSS
* {
box-sizing: border-box;
}
body {
background: url(https://westfieldcc.files.wordpress.com/2011/10/simple-blur-ipad-background.jpg) center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.outer {
position: relative;
height: 350px;
width: 350px;
display: flex;
flex-flow: row wrap;
}
.inner {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
content: '';
width: 50%;
height: 50%;
border: 1px solid #fff;
transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
.fa {
font-size: 40px;
color: #fff;
}
&:nth-child(1) {
border-top-left-radius: 100%;
}
&:nth-child(2) {
border-top-right-radius: 100%;
}
&:nth-child(3) {
border-bottom-left-radius: 100%;
}
&:nth-child(4) {
border-bottom-right-radius: 100%;
}
&:hover {
background: rgba(255, 255, 255, .3);
cursor: pointer;
border-radius: initial;
.fa {
color: rgba(0, 0, 0, .7);
}
}
}
