<link href="//cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css" rel="stylesheet" id="bootstrap-css">
<script src=""></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome CDN test</title>
<link rel="stylesheet" href="cdn.css">
<script src="https://kit.fontawesome.com/cfea0b6cc4.js" crossorigin="anonymous"></script>
</head>
<body>
<h2>Social Media Icon Awesome Hover Effect</h2>
<div class="icon-btn">
<div class="icon-1"id="icon"><i class="fab fa-facebook-f"></i></div>
<div class="icon-2"id="icon"><i class="fab fa-twitter"></i></div>
<div class="icon-3"id="icon"><i class="fab fa-linkedin-in"></i></div>
<div class="icon-4"id="icon"><i class="fab fa-instagram"></i></div>
<div class="icon-5"id="icon"><i class="fab fa-snapchat-ghost"id="icon"></i></div>
<div class="icon-6"id="icon"><i class="fab fa-quora"></i></div>
<div class="icon-7"id="icon"><i class="fab fa-whatsapp"></i></div>
<div class="icon-8"id="icon"><i class="fab fa-skype"></i></div>
<div class="icon-9"id="icon"><i class="fab fa-viber"></i></div>
</div>
<div class="icon-btn1">
<div class="icon1"id="icon"><i class="fab fa-facebook-f"></i></div>
<div class="icon2"id="icon"><i class="fab fa-twitter"></i></div>
<div class="icon3"id="icon"><i class="fab fa-linkedin-in"></i></div>
<div class="icon4"id="icon"><i class="fab fa-instagram"></i></div>
<div class="icon5"id="icon"><i class="fab fa-snapchat-ghost"id="icon"></i></div>
<div class="icon6"id="icon"><i class="fab fa-quora"></i></div>
<div class="icon7"id="icon"><i class="fab fa-whatsapp"></i></div>
<div class="icon8"id="icon"><i class="fab fa-skype"></i></div>
<div class="icon9"id="icon"><i class="fab fa-viber"></i></div>
</div>
<div class="icon-btn2">
<div class="icon_1"id="icon"><i class="fab fa-facebook-f"></i></div>
<div class="icon_2"id="icon"><i class="fab fa-twitter"></i></div>
<div class="icon_3"id="icon"><i class="fab fa-linkedin-in"></i></div>
<div class="icon_4"id="icon"><i class="fab fa-instagram"></i></div>
<div class="icon_5"id="icon"><i class="fab fa-snapchat-ghost"id="icon"></i></div>
<div class="icon_6"id="icon"><i class="fab fa-quora"></i></div>
<div class="icon_7"id="icon"><i class="fab fa-whatsapp"></i></div>
<div class="icon_8"id="icon"><i class="fab fa-skype"></i></div>
<div class="icon_9"id="icon"><i class="fab fa-viber"></i></div>
</div>
<div class="icon-btn3">
<div class="icon_a"id="icon"><i class="fab fa-facebook-f"></i></div>
<div class="icon_b"id="icon"><i class="fab fa-twitter"></i></div>
<div class="icon_c"id="icon"><i class="fab fa-linkedin-in"></i></div>
<div class="icon_d"id="icon"><i class="fab fa-instagram"></i></div>
<div class="icon_e"id="icon"><i class="fab fa-snapchat-ghost"id="icon"></i></div>
<div class="icon_f"id="icon"><i class="fab fa-quora"></i></div>
<div class="icon_g"id="icon"><i class="fab fa-whatsapp"></i></div>
<div class="icon_h"id="icon"><i class="fab fa-skype"></i></div>
<div class="icon_i"id="icon"><i class="fab fa-viber"></i></div>
</div>
</body>
</html>
*{
margin:0px;
padding:0px;
box-sizing:border-box;
font-family:sans-serif;
}
.icon-btn{
height:60px;
width:480px;
box-shadow: -5px 5px 10px -5px;
margin:auto;
margin-top:50px;
border-radius:5px;
overflow:hidden;
}
.icon1{
height:50px;
width:50px;
float:left;
background:#4267b2;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon1:hover{
background:white;
color:#4267b2;
border: 2px solid #4267b2;
border-radius:50%;
transition:.5s;
transform:rotate(360deg);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon2{
height:50px;
width:50px;
float:left;
background:#4c6ef5;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon2:hover{
background:white;
color:#4c6ef5;
border: 2px solid #4c6ef5;
border-radius:50%;
transition:.5s;
transform:rotate(360deg);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon3{
height:50px;
width:50px;
float:left;
background:#0077b5;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon3:hover{
background:white;
color:#0077b5;
border: 2px solid #0077b5;
border-radius:50%;
transition:.5s;
transform:rotate(360deg);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon4{
height:50px;
width:50px;
float:left;
background: rgb(77,88,207);
background: linear-gradient(90deg, rgba(77,88,207,1) 0%, rgba(208,40,115,1) 45%, rgba(247,212,114,1) 100%);
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon4:hover{
background:white;
color:#b93183;
border:2px solid purple;
transition:.5s;
transform:rotate(360deg);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon5{
height:50px;
width:50px;
float:left;
background:#f8f500;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon5:hover{
background:white;
color:#f8f500;
border: 2px solid #f8f500;
border-radius:50%;
transition:.5s;
transform:rotate(360deg);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon6{
height:50px;
width:50px;
float:left;
background:#b92b27;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon6:hover{
background:white;
color:#b92b27;
border: 2px solid #b92b27;
border-radius:50%;
transition:.5s;
transform:rotate(360deg);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon7{
height:50px;
width:50px;
float:left;
background:#3fe75e;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon7:hover{
background:white;
color:#3fe75e;
border: 2px solid #3fe75e;
border-radius:50%;
transition:.5s;
transform:rotate(360deg);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon8{
height:50px;
width:50px;
float:left;
background:#27a3e4;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon8:hover{
background:white;
color:#27a3e4;
border: 2px solid #27a3e4;
border-radius:50%;
transition:.5s;
transform:rotate(360deg);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon9{
height:50px;
width:50px;
float:left;
background:#795099;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon9:hover{
background:white;
color:#795099;
border: 2px solid #795099;
border-radius:50%;
transition:.5s;
transform:rotate(360deg);
box-shadow:5px 5px 5px -5px lightblue;
}
#icon{
margin:5px;
}
.icon-btn1{
height:60px;
width:480px;
box-shadow: -5px 5px 10px -5px;
margin:auto;
margin-top:15px;
border-radius:5px;
overflow:hidden;
}
.icon-1{
height:50px;
width:50px;
float:left;
background:#4267b2;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon-1:hover{
background:white;
color:#4267b2;
border: 2px solid #4267b2;
border-radius:50%;
transition:.5s;
box-shadow:5px 5px 5px -5px lightblue;
}
.icon-2{
height:50px;
width:50px;
float:left;
background:#4c6ef5;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon-2:hover{
background:white;
color:#4c6ef5;
border: 2px solid #4c6ef5;
border-radius:50%;
transition:.5s;
box-shadow:5px 5px 5px -5px lightblue;
}
.icon-3{
height:50px;
width:50px;
float:left;
background:#0077b5;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon-3:hover{
background:white;
color:#0077b5;
border: 2px solid #0077b5;
border-radius:50%;
transition:.5s;
box-shadow:5px 5px 5px -5px lightblue;
}
.icon-4{
height:50px;
width:50px;
float:left;
background: rgb(77,88,207);
background: linear-gradient(90deg, rgba(77,88,207,1) 0%, rgba(208,40,115,1) 45%, rgba(247,212,114,1) 100%);
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon-4:hover{
background:white;
color:#b93183;
border:2px solid purple;
transition:.5s;
box-shadow:5px 5px 5px -5px lightblue;
}
.icon-5{
height:50px;
width:50px;
float:left;
background:#f8f500;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon-5:hover{
background:white;
color:#f8f500;
border: 2px solid #f8f500;
border-radius:50%;
transition:.5s;
box-shadow:5px 5px 5px -5px lightblue;
}
.icon-6{
height:50px;
width:50px;
float:left;
background:#b92b27;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon-6:hover{
background:white;
color:#b92b27;
border: 2px solid #b92b27;
border-radius:50%;
transition:.5s;
box-shadow:5px 5px 5px -5px lightblue;
}
.icon-7{
height:50px;
width:50px;
float:left;
background:#3fe75e;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon-7:hover{
background:white;
color:#3fe75e;
border: 2px solid #3fe75e;
border-radius:50%;
transition:.5s;
box-shadow:5px 5px 5px -5px lightblue;
}
.icon-8{
height:50px;
width:50px;
float:left;
background:#27a3e4;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon-8:hover{
background:white;
color:#27a3e4;
border: 2px solid #27a3e4;
border-radius:50%;
transition:.5s;
box-shadow:5px 5px 5px -5px lightblue;
}
.icon-9{
height:50px;
width:50px;
float:left;
background:#795099;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon-9:hover{
background:white;
color:#795099;
border: 2px solid #795099;
border-radius:50%;
transition:.5s;
box-shadow:5px 5px 5px -5px lightblue;
}
.icon-btn2{
height:60px;
width:480px;
box-shadow: -5px 5px 10px -5px;
margin:auto;
margin-top:15px;
border-radius:5px;
overflow:hidden;
}
.icon_1{
height:50px;
width:50px;
float:left;
background:#4267b2;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_1:hover{
background:white;
color:#4267b2;
border: 2px solid #4267b2;
border-radius:50%;
transition:.5s;
transform:scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_2{
height:50px;
width:50px;
float:left;
background:#4c6ef5;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_2:hover{
background:white;
color:#4c6ef5;
border: 2px solid #4c6ef5;
border-radius:50%;
transition:.5s;
transform:scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_3{
height:50px;
width:50px;
float:left;
background:#0077b5;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_3:hover{
background:white;
color:#0077b5;
border: 2px solid #0077b5;
border-radius:50%;
transition:.5s;
transform:scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_4{
height:50px;
width:50px;
float:left;
background: rgb(77,88,207);
background: linear-gradient(90deg, rgba(77,88,207,1) 0%, rgba(208,40,115,1) 45%, rgba(247,212,114,1) 100%);
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_4:hover{
background:white;
color:#b93183;
border:2px solid purple;
transition:.5s;
transform:scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_5{
height:50px;
width:50px;
float:left;
background:#f8f500;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_5:hover{
background:white;
color:#f8f500;
border: 2px solid #f8f500;
border-radius:50%;
transition:.5s;
transform:scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_6{
height:50px;
width:50px;
float:left;
background:#b92b27;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_6:hover{
background:white;
color:#b92b27;
border: 2px solid #b92b27;
border-radius:50%;
transition:.5s;
transform:scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_7{
height:50px;
width:50px;
float:left;
background:#3fe75e;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_7:hover{
background:white;
color:#3fe75e;
border: 2px solid #3fe75e;
border-radius:50%;
transition:.5s;
transform:scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_8{
height:50px;
width:50px;
float:left;
background:#27a3e4;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_8:hover{
background:white;
color:#27a3e4;
border: 2px solid #27a3e4;
border-radius:50%;
transition:.5s;
transform:scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_9{
height:50px;
width:50px;
float:left;
background:#795099;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_9:hover{
background:white;
color:#795099;
border: 2px solid #795099;
border-radius:50%;
transition:.5s;
transform:scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon-btn3{
height:60px;
width:480px;
box-shadow: -5px 5px 10px -5px;
margin:auto;
margin-top:15px;
border-radius:5px;
overflow:hidden;
}
.icon_a{
height:50px;
width:50px;
float:left;
background:#4267b2;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_a:hover{
background:white;
color:#4267b2;
border: 2px solid #4267b2;
border-radius:50%;
transition:.5s;
transform:rotate(360deg)scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_b{
height:50px;
width:50px;
float:left;
background:#4c6ef5;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_b:hover{
background:white;
color:#4c6ef5;
border: 2px solid #4c6ef5;
border-radius:50%;
transition:.5s;
transform:rotate(360deg)scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_c{
height:50px;
width:50px;
float:left;
background:#0077b5;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_c:hover{
background:white;
color:#0077b5;
border: 2px solid #0077b5;
border-radius:50%;
transition:.5s;
transform:rotate(360deg)scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_d{
height:50px;
width:50px;
float:left;
background: rgb(77,88,207);
background: linear-gradient(90deg, rgba(77,88,207,1) 0%, rgba(208,40,115,1) 45%, rgba(247,212,114,1) 100%);
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_d:hover{
background:white;
color:#b93183;
border:2px solid purple;
transition:.5s;
transform:rotate(360deg)scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_e{
height:50px;
width:50px;
float:left;
background:#f8f500;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_e:hover{
background:white;
color:#f8f500;
border: 2px solid #f8f500;
border-radius:50%;
transition:.5s;
transform:rotate(360deg)scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_f{
height:50px;
width:50px;
float:left;
background:#b92b27;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_f:hover{
background:white;
color:#b92b27;
border: 2px solid #b92b27;
border-radius:50%;
transition:.5s;
transform:rotate(360deg)scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_g{
height:50px;
width:50px;
float:left;
background:#3fe75e;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_g:hover{
background:white;
color:#3fe75e;
border: 2px solid #3fe75e;
border-radius:50%;
transition:.5s;
transform:rotate(360deg)scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_h{
height:50px;
width:50px;
float:left;
background:#27a3e4;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_h:hover{
background:white;
color:#27a3e4;
border: 2px solid #27a3e4;
border-radius:50%;
transition:.5s;
transform:rotate(360deg)scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
.icon_i{
height:50px;
width:50px;
float:left;
background:#795099;
color:white;
border-radius:50%;
text-align:center;
font-size:25px;
line-height:50px;
display:block;
}
.icon_i:hover{
background:white;
color:#795099;
border: 2px solid #795099;
border-radius:50%;
transition:.5s;
transform:rotate(360deg)scale(.8);
box-shadow:5px 5px 5px -5px lightblue;
}
h2{
text-align:center;
margin-top:100px;
}
