To make your website more beautiful, you can use different effects to increase the beauty of your website. In this code, this element has social buttons. These buttons have a colored and circular background. Normally, these buttons appear to be lying on the ground, but when the mouse cursor is placed on these buttons, they are displayed smoothly and completely. Each button is displayed by its icon only.
HTML
<!-- This script got from www.devanswer.com -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<div class="field">
<a class="sns-btn sns-btn--twitter">
<i class="sns-btn__icon fab fa-twitter"></i>
</a>
<a class="sns-btn sns-btn--facebook">
<i class="sns-btn__icon fab fa-facebook-f"></i>
</a>
<a class="sns-btn sns-btn--instagram">
<i class="sns-btn__icon fab fa-instagram"></i>
</a>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #ddd;
}
.field {
display: flex;
width: 330px;
justify-content: space-around;
}
.sns-btn {
display: flex;
align-items: center;
justify-content: center;
height: 70px;
width: 70px;
border-radius: 50%;
border: none;
transition-duration: 0.5s;
transform: rotateX(45deg);
box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.sns-btn--twitter {
background-color: #1da1f2;
}
.sns-btn--facebook {
background-color: #3b5998;
}
.sns-btn--instagram {
background-color: #dd2b75;
}
.sns-btn:hover {
transform: scale(1.2);
box-shadow: none;
}
.sns-btn__icon {
font-size: 33px;
letter-spacing: 0.1em;
color: #fff;
}
