<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>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Button Styles Inspiration</title>
<meta name="description" content="Some ideas for modern button styles and effects" />
<meta name="keywords" content="button, effect, hover, style, inspiration, web design" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600);
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'codropsicons';
src: url("../fonts/codropsicons/codropsicons.eot");
src: url("../fonts/codropsicons/codropsicons.eot?#iefix") format("embedded-opentype"), url("../fonts/codropsicons/codropsicons.woff") format("woff"), url("../fonts/codropsicons/codropsicons.ttf") format("truetype"), url("../fonts/codropsicons/codropsicons.svg#codropsicons") format("svg");
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cf:before,
.cf:after {
