Instantly share code, notes, and snippets.
Created
August 4, 2011 15:08
-
Save OllyHodgson/1125382 to your computer and use it in GitHub Desktop.
More experiments with HTML+CSS button styling
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> | |
| <title>Button styles</title> | |
| <style> | |
| /****************************************************************************** | |
| Reset styles | |
| Based on Eric Meyer's fine work: http://meyerweb.com/eric/tools/css/reset/ | |
| ******************************************************************************/ | |
| html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, audio, video { | |
| border-style: none; | |
| border-color: inherit; | |
| border-width: 0; | |
| margin: 0; | |
| padding: 0; | |
| font-size: 100%; | |
| font-weight: normal; | |
| } | |
| /* HTML5 display-role reset for older browsers */ | |
| article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| blockquote { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| q { quotes: '\201C' '\201D' "\2018" "\2019" } | |
| q:before { content: open-quote } | |
| q:after { content: close-quote } | |
| html * { | |
| /* Slightly soften the hover/focus effect */ | |
| -webkit-transition: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000); | |
| -moz-transition: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000); | |
| -o-transition: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000); | |
| transition: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000); | |
| } | |
| </style> | |
| <style> | |
| html { | |
| padding: 1em; | |
| background-color: #f0f0f0; | |
| } | |
| body { | |
| border-top: 1px dotted #d1d1d1; | |
| border-bottom: 1px dotted #ffffff; | |
| padding: 0; | |
| font-size: 12px; | |
| font-family: Helmet, Freesans, sans-serif; /* See http://blog.mhurrell.co.uk/post/2946358183 */ | |
| line-height: 1.666667em; | |
| } | |
| p { | |
| margin: 0; | |
| padding: 1em; | |
| border-bottom: 1px dotted #d1d1d1; | |
| border-top: 1px dotted #ffffff; | |
| } | |
| p+p { | |
| } | |
| b, | |
| strong, | |
| em { | |
| padding: 0.5em; | |
| background-color: rgba(222,82,67,0.25); | |
| border-radius: 0.25em; | |
| } | |
| b:hover, | |
| strong:hover, | |
| em:hover { | |
| padding: 1em; | |
| margin: 0 -0.5em; | |
| } | |
| </style> | |
| <style> | |
| a { | |
| display: inline-block; | |
| vertical-align: middle; | |
| padding: 8px 16px; | |
| color: #f1f1f1; /* Older browsers */ | |
| color: rgba(255,255,255,0.8); | |
| background: #4c83b6 url("http://i.imgur.com/aeKDb.png") top left repeat-x; /* You'll want to host this locally */ | |
| background-image: -webkit-linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%); | |
| background-image: -moz-linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%); | |
| background-image: -ms-linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%); | |
| background-image: -o-linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%); | |
| background-image: linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%); | |
| box-shadow: 0 -1px 2px rgba(0,0,0,0.4) inset; | |
| font-weight: bold; | |
| text-decoration: none; | |
| text-align: center; | |
| text-shadow: 0 -1px 0 rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3); | |
| -webkit-background-clip: padding-box; | |
| } | |
| a:hover, | |
| a:focus, | |
| a:active { | |
| background-position: bottom left; | |
| background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%); | |
| background-image: -moz-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%); | |
| background-image: -ms-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%); | |
| background-image: -o-linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%); | |
| background-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0.9) 2%, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.1) 98%, rgba(255,255,255,0) 99%); | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; | |
| } | |
| a:focus, | |
| a:active { | |
| } | |
| * + a { | |
| border-top-left-radius: 6px; | |
| border-bottom-left-radius: 6px; | |
| } | |
| a + a { | |
| border-radius: 0; | |
| } | |
| a:first-of-type { | |
| border-top-left-radius: 6px; | |
| border-bottom-left-radius: 6px; | |
| } | |
| a:last-of-type { | |
| border-top-right-radius: 6px; | |
| border-bottom-right-radius: 6px; | |
| } | |
| /* Special cases */ | |
| a.single { | |
| border-radius: 6px; | |
| } | |
| /* Decorative stuff */ | |
| a.destructive { | |
| background-color: #de5243; | |
| } | |
| a.positive { | |
| background-color: #709024; | |
| } | |
| a.negative { | |
| background-color: #47464a; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p><a href="https://google.com/" class="positive">Open</a></p> | |
| <p><a href="https://google.com/" class="destructive">Open</a><a href="https://google.com/" class="">Open</a><a href="https://google.com/" class="negative">Open</a></p> | |
| <p><a href="https://google.com/" class="">Open</a><a href="https://google.com/" class="destructive">Delete</a><a href="https://google.com/" class="positive">Favourite</a><a href="https://google.com/" class="negative">Dislike</a></p> | |
| <p>Text before <a href="https://google.com/" class="">Open</a> and after</p> | |
| <p><strong>Elements</strong> before <a href="https://google.com/" class="">Open</a></p> | |
| <p><a href="https://google.com/" class="">Open</a> Elements <em>after</em></p> | |
| <p><strong>Elements</strong> before <a href="https://google.com/" class="">Open</a> and <em>after</em></p> | |
| <p><strong>Elements</strong> before <a href="https://google.com/" class="">Open</a><a href="https://google.com/" class="destructive">Close</a> and <em>after</em></p> | |
| <p><strong>Elements</strong> before <a href="https://google.com/" class="single">Open</a> text between <a href="https://google.com/" class="single destructive">Close</a> and elements <em>after</em></p> | |
| <p><strong>Elements</strong> before <a href="https://google.com/" class="single">Open</a> <b>between</b> <a href="https://google.com/" class="destructive">Close</a> and <em>after</em></p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment