<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 ---------->
<a href="#" class="snip1303 ion-ios-star-outline"></a>
<a href="#" class="snip1303 hover ion-ios-list-outline"></a>
<a href="#" class="snip1303 ion-ios-chatboxes-outline"></a>
<a href="#" class="snip1303 ion-ios-home-outline"></a>
<a href="#" class="snip1303 ion-ios-pie-outline"></a>
<a href="#" class="snip1303 ion-ios-gear-outline"></a>
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1303 {
font-family: 'Raleway', Arial, sans-serif;
border: none;
border-radius: 5px;
color: #ffffff;
cursor: pointer;
width: 70px;
line-height: 70px;
text-align: center;
display: inline-block;
margin: 12px 25px;
font-weight: 300;
outline: none;
position: relative;
font-size: 38px;
background-image: -webkit-linear-gradient(bottom, #262626 0, #333333 100%);
background-image: linear-gradient(to top, #262626 0, #333333 100%);
box-shadow: 1px 1px 2px -2px rgba(255, 255, 255, 0.8) inset, -1px -1px 2px -2px rgba(255, 255, 255, 0.3) inset, 1px 1px 4px rgba(0, 0, 0, 0.3);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.snip1303:after {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 5px 5px;
opacity: 0;
background-color: #94c6e7;
mix-blend-mode: color;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.snip1303:hover,
.snip1303.hover {
color: #ffffff;
}
.snip1303:hover:after,
.snip1303.hover:after {
opacity: 1;
}
.snip1303:active {
color: #ffffff;
}
.snip1303:active:after {
height: 100%;
-webkit-transition: 0.05s;
transition: 0.05s;
}
/* Demo purposes only */
body {
background-color: #212121;
padding: 50px 0;
}
