Created
June 26, 2012 14:45
-
-
Save keithwyland/2996202 to your computer and use it in GitHub Desktop.
Simple CSS Buttons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Simple CSS Buttons · CodePen</title> | |
| <style> | |
| .btn { | |
| background-color: #d22a24; | |
| background-image: url(/images/btn_bg.gif); /*fallback image*/ | |
| background-repeat: repeat-x; | |
| background-image: linear-gradient(#ee2a24 0%, #ee2a24 50%, #d22a24 51%, #d22a24 100%); | |
| color: #f5f5f5; | |
| text-decoration: none; | |
| padding: .2em .5em; | |
| border: none; | |
| border-radius: 3px; | |
| font-family: Arial, sans-serif; | |
| font-size: 13px; | |
| line-height: 1.3em; | |
| cursor: pointer; | |
| font-weight: bold; | |
| display: inline-block; | |
| } | |
| /*secondary buttons/secondary call to action on page*/ | |
| .btn-scnd { | |
| background-color: #6a6a6a; /*fallback color*/ | |
| background-image: url(/images/btn_bg.gif); /*fallback image*/ | |
| background-repeat: repeat-x; | |
| background-image: linear-gradient(#7a7a7a 0%, #7a7a7a 50%, #6a6a6a 51%, #6a6a6a 100%); | |
| } | |
| .btn-sub { | |
| font-size: 90%; | |
| font-weight: normal; | |
| } | |
| .btn:hover, .btn:focus { | |
| color: #fff; | |
| box-shadow: 0 0 0 1px #999; | |
| text-decoration: underline; | |
| } | |
| .btn:active { | |
| box-shadow: inset 0 0 1px 1px #999; | |
| text-decoration: none; | |
| } | |
| /*testing wrapping, inline-block should cover this*/ | |
| .fixedwidth { | |
| width: 300px; | |
| } | |
| </style> | |
| <style> | |
| #codepen-footer, #codepen-footer * { | |
| -webkit-box-sizing: border-box !important; | |
| -moz-box-sizing: border-box !important; | |
| box-sizing: border-box !important; | |
| } | |
| #codepen-footer { | |
| display: block !important; | |
| position: fixed !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| padding: 0 10px !important; | |
| margin: 0 !important; | |
| height: 30px !important; | |
| line-height: 30px !important; | |
| font-size: 12px !important; | |
| color: #eeeeee !important; | |
| background-color: #505050 !important; | |
| text-align: left !important; | |
| background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
| background: -moz-linear-gradient(top, #505050, #383838) !important; | |
| background: -ms-linear-gradient(top, #505050, #383838) !important; | |
| background: -o-linear-gradient(top, #505050, #383838) !important; | |
| border-top: 1px solid black !important; | |
| border-bottom: 1px solid black !important; | |
| border-radius: 0 !important; | |
| box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
| z-index: 300 !important; | |
| font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
| letter-spacing: 0 !important; | |
| word-spacing: 0 !important; | |
| } | |
| #codepen-footer a { | |
| color: #a7a7a7 !important; | |
| text-decoration: none !important; | |
| } | |
| #codepen-footer a:hover { | |
| color: white !important; | |
| } | |
| </style> | |
| <script> | |
| // Kill alerts, confirmations and prompts | |
| window.alert = function(){}; | |
| window.confirm = function(){}; | |
| window.prompt = function(){}; | |
| window.open = function(){}; | |
| window.print = function(){}; | |
| </script> | |
| <script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script> | |
| </head> | |
| <body> | |
| <p> | |
| <input type="button" class="btn" value="Subscribe"> | |
| <input type="submit" class="btn" value="Subscribe"> | |
| <a href="#" class="btn">Subscribe ></a> | |
| <button class="btn"><span class="btn-hd">Subscribe</span> <br><span class="btn-sub">And you'll get stuff!</span></button> | |
| </p> | |
| <p> | |
| <input type="button" class="btn btn-scnd" value="Subscribe"> | |
| <input type="submit" class="btn btn-scnd" value="Subscribe"> | |
| <a href="#" class="btn btn-scnd">Subscribe ></a> | |
| <button class="btn btn-scnd">Subscribe <br><span class="btn-sub">And you'll get stuff!</span></button> | |
| </p> | |
| <div class="fixedwidth"> | |
| <p>This is a fixed width div so I can test to see if the button breaks the words or wraps completely. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. <a href="#" class="btn">Sign Up Now!</a></p> | |
| </div> | |
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| <script src="http://codepen.io/javascripts/libs/modernizr.js"></script> | |
| <div id="codepen-footer"> | |
| <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| | |
| <a href="/keithwyland/pen/btnthriv/3">Edit this Pen</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p> | |
| <input type="button" class="btn" value="Subscribe"> | |
| <input type="submit" class="btn" value="Subscribe"> | |
| <a href="#" class="btn">Subscribe ></a> | |
| <button class="btn"><span class="btn-hd">Subscribe</span> <br><span class="btn-sub">And you'll get stuff!</span></button> | |
| </p> | |
| <p> | |
| <input type="button" class="btn btn-scnd" value="Subscribe"> | |
| <input type="submit" class="btn btn-scnd" value="Subscribe"> | |
| <a href="#" class="btn btn-scnd">Subscribe ></a> | |
| <button class="btn btn-scnd">Subscribe <br><span class="btn-sub">And you'll get stuff!</span></button> | |
| </p> | |
| <div class="fixedwidth"> | |
| <p>This is a fixed width div so I can test to see if the button breaks the words or wraps completely. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. <a href="#" class="btn">Sign Up Now!</a></p> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .btn { | |
| background-color: #d22a24; | |
| background-image: url(/images/btn_bg.gif); /*fallback image*/ | |
| background-repeat: repeat-x; | |
| background-image: linear-gradient(#ee2a24 0%, #ee2a24 50%, #d22a24 51%, #d22a24 100%); | |
| color: #f5f5f5; | |
| text-decoration: none; | |
| padding: .2em .5em; | |
| border: none; | |
| border-radius: 3px; | |
| font-family: Arial, sans-serif; | |
| font-size: 13px; | |
| line-height: 1.3em; | |
| cursor: pointer; | |
| font-weight: bold; | |
| display: inline-block; | |
| } | |
| /*secondary buttons/secondary call to action on page*/ | |
| .btn-scnd { | |
| background-color: #6a6a6a; /*fallback color*/ | |
| background-image: url(/images/btn_bg.gif); /*fallback image*/ | |
| background-repeat: repeat-x; | |
| background-image: linear-gradient(#7a7a7a 0%, #7a7a7a 50%, #6a6a6a 51%, #6a6a6a 100%); | |
| } | |
| .btn-sub { | |
| font-size: 90%; | |
| font-weight: normal; | |
| } | |
| .btn:hover, .btn:focus { | |
| color: #fff; | |
| box-shadow: 0 0 0 1px #999; | |
| text-decoration: underline; | |
| } | |
| .btn:active { | |
| box-shadow: inset 0 0 1px 1px #999; | |
| text-decoration: none; | |
| } | |
| /*testing wrapping, inline-block should cover this*/ | |
| .fixedwidth { | |
| width: 300px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment