Coder Wrap provides free to use snippets

body {
 margin: 0px;
 
}
.bg {
 background-size: cover;
 background-repeat: no-repeat;
 color: white;
 font-family: montserrat;
 height: 100vh;
}
a {
 color: white;
 text-decoration: none;
}

.social {
 position: fixed;
 top: 20%;
}

.social ul {
 padding: 0px;
 transform: translate(-205px, 0);
}

.social ul li {
 display: block;
 margin: 5px;
 background: rgba(7, 44, 93, 0.6);
 width: 250px;
 text-align: right;
 border-radius: 0 30px 30px 0;
 transition: all 1.5s;
 position: relative;
}

.social ul li a {
 height: 36px;
 padding: 10px 60px 10px 10px;
 display: flex;
 justify-content: flex-end;
 align-items: center;
}

.social ul li:hover {
 transform: translate(110px, 0);
 background: #072c5d;
 transition: all 1.5s;
}

.social ul li:hover a {
 color: white;
}

.social ul li:hover i {
 transform: rotate(360deg);
 transition: all 1.5s;
}

.social ul li i {
 background: white;
 border-radius: 50%;
 width: 36px;
 height: 36px;
 transform: rotate(0deg);
 text-align: center;
 display: flex;
 flex-flow: row wrap;
 align-items: center;
 justify-content: center;
 position: absolute;
 right: 10px;
 top: 10px;
}