<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="jumbotron">
<h1>New Instagram logo</h1>
<p>This is the new Instagram logo with new colors with a cool hover effect.</p>
<p>It looks great with other social icons.</p>
</div>
<center>
<span class="btn btn-instagram btn-circle"><i class="fa fa-instagram"></i></span>
</center>
</div>
</div>
.btn-instagram{
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
color: white;
border: 5px solid #cc2366;
}
.btn-instagram:hover{
background: -moz-linear-gradient(45deg, white 0%, white 25%, white 50%, white 75%, white 100%);
background: -webkit-linear-gradient(45deg, white 0%, white 25%, white 50%, white 75%, white 100%);
background: linear-gradient(45deg, white 0%, white 25%, white 50%, white 75%, white 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='white',GradientType=1 );
color: #cc2366;
border: 5px solid #cc2366;
}
.btn-circle {
width: 100px;
height: 100px;
padding: 2px 16px;
font-size: 65px;
line-height: 1.33;
border-radius: 25px;
outline: none;
transition: 2s background;
}
