"button"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/simonbusborg/pen/cyxad?limit=all&page=2&q=button" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">:root { --color-dark: #161616; --color-ocean: #416dea; --color-grass: #3dd28d; --color-snow: #FFFFFF; --color-salmon: #F32C52; --color-sun: #feee7d; --color-alge: #7999a9; --color-flower: #353866; --color-smoke: #e4e4e4; --font-face: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { display: -webkit-box; display: -ms-flexbox; display: flex; box-sizing: border-box; min-height: 100vh; background: whitesmoke; font-family: var(--font-face); font-size: 16px; font-weight: 700; line-height: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 992px) { body { border-width: 30px; } } body.linked .button, body.linked h1 { opacity: .3; -webkit-transition: opacity 300ms linear; transition: opacity 300ms linear; } body.linked p { color: var(--color-smoke); -webkit-transition: color 300ms linear; transition: color 300ms linear; } h1 { text-align: center; -webkit-transition: opacity 300ms linear; transition: opacity 300ms linear; color: var(--color-dark); font-family: var(--font-face); font-size: 32px; font-weight: 700; } h1 span { font-weight: 400; } p { max-width: 460px; margin: 0 auto; -webkit-transition: color 300ms linear; transition: color 300ms linear; text-align: center; color: var(--color-dark); font-weight: 400; line-height: 1.5; } a, a:visited { text-decoration: none; color: var(--color-ocean); font-weight: 500; } a:hover, a:visited:hover { text-decoration: underline; color: var(--color-ocean); } .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; padding: 20px; } .button-container { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 60px auto; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .button { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; margin: 10px; padding: 12px 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 150ms linear; transition: all 150ms linear; text-align: center; white-space: nowrap; text-decoration: none !important; text-transform: none; text-transform: capitalize; color: #fff; border: 0 none; border-radius: 4px; font-size: 13px; font-weight: 500; line-height: 1.3; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -ms-flex: 0 0 160px; flex: 0 0 160px; box-shadow: 2px 5px 10px var(--color-smoke); } .button:hover { -webkit-transition: all 150ms linear; transition: all 150ms linear; opacity: .85; } .button:active { -webkit-transition: all 150ms linear; transition: all 150ms linear; opacity: .75; } .button:focus { outline: 1px dotted #959595; outline-offset: -4px; } .button.-regular { color: #202129; background-color: #f2f2f2; } .button.-regular:hover { color: #202129; background-color: #e1e2e2; opacity: 1; } .button.-regular:active { background-color: #d5d6d6; opacity: 1; } .button.-dark { color: var(--color-snow); background: var(--color-dark); } .button.-dark:focus { outline: 1px dotted white; outline-offset: -4px; } .button.-green { color: var(--color-snow); background: var(--color-grass); } .button.-blue { color: var(--color-snow); background: var(--color-ocean); } .button.-salmon { color: var(--color-snow); background: var(--color-salmon); } .button.-sun { color: #f15c5c; background: var(--color-sun); } .button.-alge { color: #e7ff20; background: var(--color-alge); } .button.-flower { color: #FE8CDF; background: var(--color-flower); } </style></head><body> <div class='container'> <h1> Buttons </h1> <p> Random selection of button styles. May change over time as I get alot of stupid ideas. Feel free to follow me on <a href="https://twitter.com/simonbusborg" target="_blank" class="twitter">twitter</a> </p> <div class="button-container"> <div class='button -regular center'>Let's start</div> <div class='button -dark center'>Touch me</div> <div class='button -green center'>Just like that</div> <div class='button -blue center'>And that, oh, yeah</div> <div class='button -salmon center'>Now that I like</div> <div class='button -sun center'>God, that's so nice</div> <div class='button -alge center'>Now lower down</div> <div class='button -flower center'>Where the figs lie</div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >const body = document.querySelector('body') const twitter = document.querySelector('.twitter') twitter.addEventListener("mouseover", function () { body.classList.add('linked') },false) twitter.addEventListener("mouseout", function () { body.classList.remove('linked') }, false) //# sourceURL=pen.js </script> </body></html>

Questions / Comments: