Pre Loader V5.0 (With two different animation)
Responsive Modal with close button animation V1.0
Here's the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Social V1.0 by roundCube</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body style="height:15000px">
<div id="socialPanel">
<a href="#"><div id="button1"></div></a>
<a href="#"><div id="button2"></div></a>
<a href="#"><div id="button3"></div></a>
<a href="#"><div id="button4"></div></a>
<a href="#"><div id="button5"></div></a>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">© roundCube 2015</a></div>
</body>
<style>
#socialPanel{
position: fixed;
top:30%;
height:240px;
width:40px;
right:5px;
}
#copyright{
top:5px;
left:0px;
width:100%;
height: 50px;
color: white;
text-align: center;
}
#copyright a{
text-decoration: none;
color:black;
}
#button1{
position: absolute;
top:0px;
right:0px;
height:40px;
width:40px;
background-color: #3b5998;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb2Z8E6y0bLhwZCfI1zCG2VlybflzbBdokGAIUIHRQ1-yEziROavbOelQDyqBxWv0tLInCHG8lRqd9XdlakNWMT4FM_0ryhYJmxgspbTR3pj81iKlue0Nt-T13OqQ7Jy9WgojecSzZ4Qo/s1600/fb.png);
background-size: 100% 100%;
-webkit-transition: all 0.5s ease;
-moz-transition : all 0.5s ease 0s;
}
#button1:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpQ67D3l7NukCLXLchPqw94QzBsOUsb0y0k0FlyojH34fWx1cO7l4YoSNvflNCFxuXfXdU0dyFXmvczqS5KmDjOC0OdJDQrcww6bEhzHJyROqmvR6Vs_Vu_M34VIuEfLifsfUVeMjMEk4/s1600/fb1.png);
background-color: white;
}
#button2{
position: absolute;
top:40px;
right:0px;
height:40px;
width:40px;
background-color: #4099FF;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEFYiR-y5L6DqK4t6513sr9ywt90hI6vmzR27Q9lDpkXYbbRT-3C7F26TKCucehQXDoixiWRO9vBdECa_M2Eilyi2kEOwXIsl6nHGK_Bfk1cPODvXwlFZGj8Iv8jwWzgH58uStabb3sl8/s1600/twitter.png);
background-size: 100% 100%;
-webkit-transition: all 0.5s ease;
-moz-transition : all 0.5s ease 0s;
}
#button2:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJ-o8zzjDdLZIflLyOp8k2qoNmvE_QLPfsbbcqbBfYe0gcgJcp_Sb1WrbYOWN-d6tSq21q9pIsGL_2XuNYDhdSYWwt9akSVHhLGegUS3vaUgir9cRzd4qYqGzh8Qu5jXv9RmfkDzficc/s1600/twitter1.png);
background-color: white;
}
#button3{
position: absolute;
top:80px;
right:0px;
height:40px;
width:40px;
background-color: #007bb6;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga-pveo-UrxsR38DWrkfKc6YoIaSYhje4pPaAefsm3TOMle8R-FZigLuZnbDOFC7fRoqyUmOPOcAy8L7bSHo3Pf4vDp2NdrM9owTB3fjseMvCatbtzTnWsVIWPLlOA86bXLpqHzvsvIP8/s1600/linkedin.png);
background-size: 100% 100%;
-webkit-transition: all 0.5s ease;
-moz-transition : all 0.5s ease 0s;
}
#button3:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja-oH2pA3uqKUvziHJfg_Bsak-PwAVgXk63xFf9-mdAfKfwL5IBJixm80AWtsRd2Msh9iEYFwJUtD3scPm_gTo0taorbG5L9ZLuzEaDhFCH81XlJGwswpwtgZUYmii7-j8tnObkdzHBCg/s1600/linkedin1.png);
background-color: white;
}
#button4{
position: absolute;
top:120px;
right:0px;
height:40px;
width:40px;
background-color: #C92228;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisGJrdf7qTRUaeYF7352qEk-l_OUpxmrImL6yVGOqLJaulvKNW-R1iw-h4SZiliB43eCPpTC-3XBGgxUjz5HwxJNzZ6UysoIl2h6SPDtxe64BqP5-5yBLRHhH_Edn5wVLjBBT4lX38sIY/s1600/pintrest.png);
background-size: 90% 90%;
background-repeat: no-repeat;
-webkit-transition: all 0.5s ease;
-moz-transition : all 0.5s ease 0s;
}
#button4:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglhuFyNTLB3Ag1feIIXeqx79WM9MFmJCpDDGyhN2OwujjsXlly_SWM8vHbyVuqYgxK3mLpb_B038Y3uA4z9kTN6joXZvoMg4T1hnr-aJ6f8UvKAdbnfFcU4yVwkvXuIEDRdIPHRvh0bXc/s1600/pintrest1.png);
background-color: white;
}
#button5{
position: absolute;
top:160px;
right:0px;
height:40px;
width:40px;
background-color: #a77658;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBu8BVYt6LZ4wm8LWrhd84R8OHfoirJHTITqbqMhSsmJ219YzEUjZjNhI5wtu_DxD9DTftU-KUiWgE_CTbz5-fH9XD_35Qvd3W5NUsHgZmOVDPxaselvlFYL-UI4lgRnL3ApyqW-SRSc/s1600/insta.png);
background-size: 100% 100%;
-webkit-transition: all 0.5s ease;
-moz-transition : all 0.5s ease 0s;
}
#button5:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOSzvBx9uMbZ00V189O_zBWp3OtOPliKz2CBwHtxMkG63qpZsX1tuRgNhw0BPwMflU4mvDaCZpgH_ehAkiJr1GZrRUQbxlsy9IKKXhisGZTiSjc1a8k2FNu-HX4B26N1vIIbjTFHLfn6g/s1600/insta1.png);
background-color: white;
}
</style>
</html>
If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
If you like our work please don't remove the hyperlink to our Facebook page.
 Responsive Modal with close button animation V1.0 Here...){kind=link}
0 comments: