<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ibrahimozturkme/pen/mOZmgG?depth=everything&order=popularity&page=27&q=skype&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<style class="cp-pen-styles">body
{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
background:#607D8B
}
.btn-list
{
margin:48px 0;
padding:10px 16px;
position:relative
}
.btn-list.normal:after
{
content:'Normal'
}
.btn-list.rounded:after
{
content:'Rounded'
}
.btn-list:after
{
width:90%;
height:48px;
font:bold 18px/2.6 Roboto,sans-serif;
text-align:center;
position:absolute;
top:-48px;
left:5%;
z-index:-1;
border-radius:3px 3px 0 0
}
.btn-list li:not(.title)
{
float:left
}
.btn-gradient
{
width:36px;
height:36px;
text-align:center;
line-height:2.2;
display:block;
margin:10px;
border-radius:2px;
-webkit-transition:all 300ms;
transition:all 300ms
}
.btn-gradient.rounded
{
border-radius:50%
}
.btn-gradient i
{
font-size:18px;
line-height:1;
vertical-align:middle
}
#light,#dark
{
margin:20px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column
}
#light .btn-list
{
background:#FFF;
box-shadow:0 0 8px rgba(0,0,0,0.10)
}
#light .btn-list:after
{
color:rgba(0,0,0,0.54);
background:#FAFAFA;
box-shadow:0 0 8px rgba(0,0,0,0.10)
}
#light .btn-gradient
{
color:rgba(0,0,0,0.54);
box-shadow:0 0 1px rgba(0,0,0,0.54)
}
#light .btn-gradient:hover
{
color:#FFF
}
#dark .btn-gradient
{
color:rgba(255,255,255,0.54);
box-shadow:0 0 1px rgba(255,255,255,0.54)
}
#dark .btn-gradient:hover
{
color:#FFF
}
#dark .btn-list:after
{
color:rgba(255,255,255,0.54);
background:#000;
box-shadow:0 0 8px rgba(255,255,255,0.10)
}
#dark .btn-list
{
background:#212121;
box-shadow:0 0 8px rgba(0,0,0,0.10)
}
@-webkit-keyframes Gradient {
0%
{
background-position:0 50%
}
50%
{
background-position:100% 50%
}
100%
{
background-position:0 50%
}
}
@keyframes Gradient {
0%
{
background-position:0 50%
}
50%
{
background-position:100% 50%
}
100%
{
background-position:0 50%
}
}
#light .btn-gradient.facebook:hover
{
box-shadow:0 5px 8px rgba(26,35,126,0.25);
background:#3949AB;
background:-webkit-linear-gradient(left,#3949AB 0%,#2196F3 100%);
background:linear-gradient(to right,#3949AB 0%,#2196F3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3949AB',endColorstr='#2196F3',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#light .btn-gradient.twitter:hover
{
box-shadow:0 5px 8px rgba(33,150,243,0.25);
background:#00BCD4;
background:-webkit-linear-gradient(left,#00BCD4 0%,#2196F3 100%);
background:linear-gradient(to right,#00BCD4 0%,#2196F3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BCD4',endColorstr='#2196F3',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#light .btn-gradient.google-plus:hover
{
box-shadow:0 5px 8px rgba(244,67,54,0.25);
background:#F44336;
background:-webkit-linear-gradient(left,#F44336 0%,#FF1744 100%);
background:linear-gradient(to right,#F44336 0%,#FF1744 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F44336',endColorstr='#FF1744',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#light .btn-gradient.instagram:hover
{
box-shadow:0 5px 8px rgba(63,81,181,0.25);
background:#FFC107;
background:-webkit-linear-gradient(left,#FFC107 0%,#F50057 50%,#3F51B5 100%);
background:linear-gradient(to right,#FFC107 0%,#F50057 50%,#3F51B5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFC107',endColorstr='#3F51B5',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 5s ease infinite;
animation:Gradient 5s ease infinite
}
#light .btn-gradient.linkedin:hover
{
box-shadow:0 5px 8px rgba(3,169,244,0.25);
background:#0288D1;
background:-webkit-linear-gradient(left,#0288D1 0%,#2196F3 100%);
background:linear-gradient(to right,#0288D1 0%,#2196F3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0288D1',endColorstr='#2196F3',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#light .btn-gradient.github:hover
{
color:rgba(33,33,33,1);
box-shadow:0 5px 8px rgba(0,0,0,0.25);
background:#ECEFF1;
background:-webkit-linear-gradient(left,#ECEFF1 0%,#B0BEC5 100%);
background:linear-gradient(to right,#ECEFF1 0%,#B0BEC5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ECEFF1',endColorstr='#B0BEC5',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#light .btn-gradient.codepen:hover
{
box-shadow:0 5px 8px rgba(0,0,0,0.25);
background:#000;
background:-webkit-linear-gradient(left,#000 0%,#212121 100%);
background:linear-gradient(to right,#000 0%,#212121 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#212121',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#light .btn-gradient.gmail:hover
{
box-shadow:0 5px 8px rgba(244,67,54,0.25);
background:#D50000;
background:-webkit-linear-gradient(left,#D50000 0%,#FF1744 100%);
background:linear-gradient(to right,#D50000 0%,#FF1744 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#D50000',endColorstr='#FF1744',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#light .btn-gradient.skype:hover
{
box-shadow:0 5px 8px rgba(3,169,244,0.25);
background:#030000;
background:#039BE5;
background:-webkit-linear-gradient(left,#039BE5 0%,#29B6F6 100%);
background:linear-gradient(to right,#039BE5 0%,#29B6F6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#039BE5',endColorstr='#29B6F6',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#dark .btn-gradient.facebook:hover
{
box-shadow:0 5px 8px rgba(26,35,126,0.50);
background:#3949AB;
background:-webkit-linear-gradient(left,#3949AB 0%,#2196F3 100%);
background:linear-gradient(to right,#3949AB 0%,#2196F3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3949AB',endColorstr='#2196F3',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#dark .btn-gradient.twitter:hover
{
box-shadow:0 5px 8px rgba(33,150,243,0.50);
background:#00BCD4;
background:-webkit-linear-gradient(left,#00BCD4 0%,#2196F3 100%);
background:linear-gradient(to right,#00BCD4 0%,#2196F3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BCD4',endColorstr='#2196F3',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#dark .btn-gradient.google-plus:hover
{
box-shadow:0 5px 8px rgba(244,67,54,0.50);
background:#F44336;
background:-webkit-linear-gradient(left,#F44336 0%,#FF1744 100%);
background:linear-gradient(to right,#F44336 0%,#FF1744 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F44336',endColorstr='#FF1744',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#dark .btn-gradient.instagram:hover
{
box-shadow:0 5px 8px rgba(63,81,181,0.50);
background:#FFC107;
background:-webkit-linear-gradient(left,#FFC107 0%,#F50057 50%,#3F51B5 100%);
background:linear-gradient(to right,#FFC107 0%,#F50057 50%,#3F51B5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFC107',endColorstr='#3F51B5',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 5s ease infinite;
animation:Gradient 5s ease infinite
}
#dark .btn-gradient.linkedin:hover
{
box-shadow:0 5px 8px rgba(3,169,244,0.50);
background:#0288D1;
background:-webkit-linear-gradient(left,#0288D1 0%,#2196F3 100%);
background:linear-gradient(to right,#0288D1 0%,#2196F3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0288D1',endColorstr='#2196F3',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#dark .btn-gradient.github:hover
{
color:rgba(33,33,33,1);
box-shadow:0 5px 8px rgba(0,0,0,0.50);
background:#ECEFF1;
background:-webkit-linear-gradient(left,#ECEFF1 0%,#B0BEC5 100%);
background:linear-gradient(to right,#ECEFF1 0%,#B0BEC5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ECEFF1',endColorstr='#B0BEC5',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#dark .btn-gradient.codepen:hover
{
box-shadow:0 5px 8px rgba(0,0,0,0.50);
background:#000;
background:-webkit-linear-gradient(left,#000 0%,#212121 100%);
background:linear-gradient(to right,#000 0%,#212121 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#212121',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#dark .btn-gradient.gmail:hover
{
box-shadow:0 5px 8px rgba(244,67,54,0.50);
background:#D50000;
background:-webkit-linear-gradient(left,#D50000 0%,#FF1744 100%);
background:linear-gradient(to right,#D50000 0%,#FF1744 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#D50000',endColorstr='#FF1744',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}
#dark .btn-gradient.skype:hover
{
box-shadow:0 5px 8px rgba(3,169,244,0.50);
background:#030000;
background:#039BE5;
background:-webkit-linear-gradient(left,#039BE5 0%,#29B6F6 100%);
background:linear-gradient(to right,#039BE5 0%,#29B6F6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#039BE5',endColorstr='#29B6F6',GradientType=1);
background-size:400%;
-webkit-animation:Gradient 1s ease infinite;
animation:Gradient 1s ease infinite
}</style></head><body>
<div id="light">
<ul class="btn-list normal">
<li><a href="" class="btn-gradient facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="" class="btn-gradient twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="" class="btn-gradient google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="" class="btn-gradient instagram"><i class="fa fa-instagram"></i></a></li>
<li><a href="" class="btn-gradient linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="" class="btn-gradient github"><i class="fa fa-github"></i></a></li>
<li><a href="" class="btn-gradient codepen"><i class="fa fa-codepen"></i></a></li>
<li><a href="" class="btn-gradient gmail"><i class="fa fa-envelope"></i></a></li>
<li><a href="" class="btn-gradient skype"><i class="fa fa-skype"></i></a></li>
</ul>
<ul class="btn-list rounded">
<li><a href="" class="btn-gradient rounded facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="" class="btn-gradient rounded twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="" class="btn-gradient rounded google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="" class="btn-gradient rounded instagram"><i class="fa fa-instagram"></i></a></li>
<li><a href="" class="btn-gradient rounded linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="" class="btn-gradient rounded github"><i class="fa fa-github"></i></a></li>
<li><a href="" class="btn-gradient rounded codepen"><i class="fa fa-codepen"></i></a></li>
<li><a href="" class="btn-gradient rounded gmail"><i class="fa fa-envelope"></i></a></li>
<li><a href="" class="btn-gradient rounded skype"><i class="fa fa-skype"></i></a></li>
</ul>
</div>
<div id="dark">
<ul class="btn-list normal">
<li><a href="" class="btn-gradient facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="" class="btn-gradient twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="" class="btn-gradient google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="" class="btn-gradient instagram"><i class="fa fa-instagram"></i></a></li>
<li><a href="" class="btn-gradient linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="" class="btn-gradient github"><i class="fa fa-github"></i></a></li>
<li><a href="" class="btn-gradient codepen"><i class="fa fa-codepen"></i></a></li>
<li><a href="" class="btn-gradient gmail"><i class="fa fa-envelope"></i></a></li>
<li><a href="" class="btn-gradient skype"><i class="fa fa-skype"></i></a></li>
</ul>
<ul class="btn-list rounded">
<li><a href="" class="btn-gradient rounded facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="" class="btn-gradient rounded twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="" class="btn-gradient rounded google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="" class="btn-gradient rounded instagram"><i class="fa fa-instagram"></i></a></li>
<li><a href="" class="btn-gradient rounded linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="" class="btn-gradient rounded github"><i class="fa fa-github"></i></a></li>
<li><a href="" class="btn-gradient rounded codepen"><i class="fa fa-codepen"></i></a></li>
<li><a href="" class="btn-gradient rounded gmail"><i class="fa fa-envelope"></i></a></li>
<li><a href="" class="btn-gradient rounded skype"><i class="fa fa-skype"></i></a></li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</body></html>
