"bu770n"
Bootstrap 3.3.0 Snippet by okebro

<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 ----------> <!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" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <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 { content: ''; display: table; } .cf:after { clear: both; } body { background: #cfd8dc; color: #37474f; font-weight: 400; font-size: 1em; font-family: 'Raleway', Arial, sans-serif; } .support { font-weight: bold; padding: 2em 0 0 0; font-size: 1.4em; color: #ee2563; display: none; } a { color: #7986cb; text-decoration: none; outline: none; } a:hover, a:focus { color: #3f51b5; } .hidden { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } .container { margin: 0 auto; text-align: center; overflow: hidden; } .content { padding: 2em 1em 5em; z-index: 1; max-width: 1000px; margin: 0 auto; } .content h2 { margin: 0 0 2em; } .content p { margin: 1em 0; padding: 0 0 2em; font-size: 0.85em; } .box { padding: 4.5em 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } /* Box colors */ .bg-1 { background: #ECEFF1; color: #37474f; } .bg-2 { background: #7986cb; color: #ECEFF1; } .bg-3 { background: #37474f; color: #fff; } /* Common button styles */ .button { float: left; min-width: 150px; max-width: 250px; display: block; margin: 1em; padding: 1em 2em; border: none; background: none; color: inherit; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .button:focus { outline: none; } .button > span { vertical-align: middle; } /* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */ .bg-1 .button { color: #37474f; border-color: #37474f; } .bg-2 .button { color: #ECEFF1; border-color: #ECEFF1; } .bg-3 .button { color: #fff; border-color: #fff; } /* Sizes */ .button--size-s { font-size: 14px; } .button--size-m { font-size: 16px; } .button--size-l { font-size: 18px; } /* Typography and Roundedness */ .button--text-upper { letter-spacing: 2px; text-transform: uppercase; } .button--text-thin { font-weight: 300; } .button--text-medium { font-weight: 500; } .button--text-thick { font-weight: 600; } .button--round-s { border-radius: 5px; } .button--round-m { border-radius: 15px; } .button--round-l { border-radius: 40px; } /* Borders */ .button--border-thin { border: 1px solid; } .button--border-medium { border: 2px solid; } .button--border-thick { border: 3px solid; } /* Individual button styles */ /* Wapasha */ .button.button--wapasha { background: #37474f; color: #fff; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .button--wapasha.button--inverted { background: #fff; color: #37474f; } .button--wapasha::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #3f51b5; z-index: -1; border-radius: inherit; opacity: 0; -webkit-transform: scale3d(0.6, 0.6, 1); transform: scale3d(0.6, 0.6, 1); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } .button--wapasha.button--inverted::before { border-color: #7986cb; } .button--wapasha:hover { background-color: #fff; color: #3f51b5; } .button--wapasha.button--inverted:hover { background-color: #37474f; color: #7986cb; } .button--wapasha:hover::before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} </style> </head> <body> <div class="container"> <section class="content"> <div class="box bg-1"> <button class="button button--wapasha button--round-s">Hide</button> <button class="button button--wapasha button--round-s">Add to Cart</button> <button class="button button--wapasha button--round-s">Send Request</button> </div> <div class="box bg-2"> <button class="button button--wapasha button--text-thick button--text-upper button--size-s">Hide</button> <button class="button button--wapasha button--text-thick button--text-upper button--size-s">Add to Cart</button> <button class="button button--wapasha button--text-thick button--text-upper button--size-s">Send Request</button> </div> <div class="box bg-3"> <button class="button button--wapasha button--round-l button--text-thick button--inverted">Hide</button> <button class="button button--wapasha button--round-l button--text-thick button--inverted">Add to Cart</button> <button class="button button--wapasha button--round-l button--text-thick button--inverted">Send Request</button> </div> </section> <!-- Related demos --> </div><!-- /container --> <script> (function() { var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/); if(isSafari) { document.getElementById('support-note').style.display = 'block'; } })(); </script> </body> </html>

Related: See More


Questions / Comments: