Instantly share code, notes, and snippets.
Created
August 23, 2011 03:49
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save jinwei233/1164305 to your computer and use it in GitHub Desktop.
按钮
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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| <title>Custom Buttons 3.1 (demo)</title> | |
| <style type="text/css"> | |
| body { | |
| background:#fff; | |
| padding:20px; | |
| color:#000; | |
| font-family:Arial,sans-serif; | |
| font-size:13px; | |
| line-height:1.3; | |
| } | |
| h1 {margin:0 0 .25em; font-size:1.8em;} | |
| h2 {margin:1.5em 0 .25em; font-size:1.2em;} | |
| code {font:12px Monaco,monospaced; color:#963;} | |
| /* Start custom button CSS here | |
| ---------------------------------------- */ | |
| .btn { | |
| display:inline-block; | |
| background:none; | |
| margin:0; | |
| padding:3px 0; | |
| border-width:0; | |
| overflow:visible; | |
| font:100%/1.2 Arial,Sans-serif; | |
| text-decoration:none; | |
| color:#333; | |
| } | |
| * html button.btn { | |
| padding-bottom:1px; | |
| } | |
| /* Immediately below is a temporary hack to serve the | |
| following margin values only to Gecko browsers | |
| Gecko browsers add an extra 3px of left/right | |
| padding to button elements which can't be overriden. | |
| Thus, we use -3px of left/right margin to overcome this. */ | |
| html:not([lang*=""]) button.btn { | |
| margin:0 -3px; | |
| } | |
| .btn span { | |
| background:#f9f9f9; | |
| z-index:1; | |
| margin:0; | |
| padding:3px 0; | |
| border-left:1px solid #ccc; | |
| border-right:1px solid #bbb; | |
| } | |
| * html .btn span { | |
| padding-top:0; | |
| } | |
| .btn span span { | |
| background:none; | |
| position:relative; | |
| padding:3px .4em; | |
| border-width:0; | |
| border-top:1px solid #ccc; | |
| border-bottom:1px solid #bbb; | |
| } | |
| .btn b { | |
| background:#e3e3e3; | |
| position:absolute; | |
| z-index:2; | |
| bottom:0; | |
| left:0; | |
| width:100%; | |
| overflow:hidden; | |
| height:40%; | |
| border-top:3px solid #eee; | |
| } | |
| * html .btn b { | |
| top:1px; | |
| } | |
| .btn u { | |
| text-decoration:none; | |
| position:relative; | |
| z-index:3; | |
| } | |
| /* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */ | |
| button.pill-l span { | |
| border-right-width:0; | |
| } | |
| button.pill-l span span { | |
| border-right:1px solid #ccc; | |
| } | |
| button.pill-c span { | |
| border-right-style:none; | |
| border-left-color:#fff; | |
| } | |
| button.pill-c span span { | |
| border-right:1px solid #ccc; | |
| } | |
| button.pill-r span { | |
| border-left-color:#fff; | |
| } | |
| /* only needed if implementing separate hover state for buttons */ | |
| .btn:hover span, .btn:hover span span { | |
| cursor:pointer; | |
| border-color:#9cf !important; | |
| color:#000; | |
| } | |
| /* use if one button should be the 'primary' button */ | |
| .primary { | |
| font-weight:bold; | |
| color:#000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Custom Buttons 3.1 (demo)</h1> | |
| <p class="s0"><strong>Updated:</strong> 27 Feb 2008</p> | |
| <p><strong style="color:#c00;">DO NOT USE THIS CODE AS IS.</strong> This is an attempt to recreate <a href="../3.0/code.html">Custom Buttons v3.0</a> without requiring <a href="../3.0/img/bg-button.gif">3.0's background gradient image</a>, yet still retain some dimensionality (via a subtle flat shadow on the bottom half of the button). This example code currently works as intended in Firefox and Safari, but fails in IE. And it's a little messy in terms of the required DOM. All caveats and explanations from the <a href="../3.0/code.html">v3.0 code demo</a> apply here too.</p> | |
| <form action="#"> | |
| <p><a href="#" class="btn"><span><span><b> </b><u>button</u></span></span></a> <code><a></code></p> | |
| <p><button type="button" class="btn"><span><span><b> </b><u>button</u></span></span></button> <code><button></code></p> | |
| <p><a href="#" class="btn"><span><span><b> </b><u>longer button text</u></span></span></a> <code><a></code></p> | |
| <p><button type="button" class="btn"><span><span><b> </b><u>longer button text</u></span></span></button> <code><button></code></p> | |
| <p><button type="button" class="btn"><span><span><b> </b><u>button</u></span></span></button> <button type="button" class="btn"><span><span><b> </b><u>button</u></span></span></button> <button type="button" class="btn"><span><span><b> </b><u>button</u></span></span></button> <code><button> <button> <button></code></p> | |
| <p><button type="button" class="btn primary"><span><span><b> </b><u>Save</u></span></span></button> <button type="button" class="btn"><span><span><b> </b><u>Cancel</u></span></span></button> | |
| <code><button class="primary"> <button></code></p> | |
| <p><button type="button" class="btn pill-l"><span><span><b> </b><u>Left</u></span></span></button><button type="button" class="btn pill-c"><span><span><b> </b><u>Center</u></span></span></button><button type="button" class="btn pill-r"><span><span><b> </b><u>Right</u></span></span></button> | |
| <code><button class="pill-l"><button class="pill-c"><button class="pill-r"></code></p> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment