From 019dae38f6d8092fde75b863879b629e3a8a30d0 Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 1 Mar 2011 13:17:04 +0000 Subject: [PATCH 01/41] Replaced javascript:void(false) href values with #nogo --- demo.html | 74 +++++++++++++++++++++++++++---------------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/demo.html b/demo.html index f6a5bba..dc52f2b 100644 --- a/demo.html +++ b/demo.html @@ -37,7 +37,7 @@

Code:

Result:

- This is a Button + This is a Button
@@ -50,7 +50,7 @@

Code:

Result:

- This is a Pill Button + This is a Pill Button
@@ -67,7 +67,7 @@

Code:

Result:

- Publish Post or Save as Draft + Publish Post or Save as Draft
@@ -109,7 +109,7 @@

Code:

Result:

- ArchiveReport SpamDelete + ArchiveReport SpamDelete

@@ -124,7 +124,7 @@

Code:

Result:

- ArchiveReport SpamDelete + ArchiveReport SpamDelete @@ -142,7 +142,7 @@

Code:

Result:

- Search + Search

Here is a list of all the supported icon classes:

@@ -157,123 +157,123 @@

Result:

.book - View Log + View Log .calendar - Add to Calendar + Add to Calendar .chat - Start Chat + Start Chat .check - Approve Registration + Approve Registration .clock - Register Work Time + Register Work Time .cog - Settings + Settings .comment - Add Comment + Add Comment .cross - Remove Item + Remove Item .downarrow - Move Down + Move Down .fork - Create Branch + Create Branch .heart - Add to Favorites + Add to Favorites .home - Back to Frontpage + Back to Frontpage .key - Password Protect + Password Protect .leftarrow - Move Left + Move Left .lock - Lock Article + Lock Article .loop - Resend Message + Resend Message .magnifier - Search + Search .mail - Send Newsletter + Send Newsletter .move - Move + Move .pen - Edit Post + Edit Post .pin - Pin to Map + Pin to Map .plus - Add Post + Add Post .reload - Reload Page + Reload Page .rightarrow - Move Right + Move Right .rss - Subscribe to RSS Feed + Subscribe to RSS Feed .tag - Add Tag + Add Tag .trash - Delete Post + Delete Post .unlock - Unlock Article + Unlock Article .uparrow - Move Up + Move Up .user - Add New User + Add New User @@ -293,7 +293,7 @@

Code:

Result:

- Create Project + Create Project From 1f9d834cf5bc118d9cc29dd1b494c3cd3164dabe Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 1 Mar 2011 13:37:20 +0000 Subject: [PATCH 02/41] CSS reformat to make editing easier. Minor simplification of some property values. Addition of :focus and :active styles to improve accessibility and provide feedback to keyboard users. --- stylesheets/css3buttons.css | 361 ++++++++++++++++++++++++++++-------- 1 file changed, 286 insertions(+), 75 deletions(-) diff --git a/stylesheets/css3buttons.css b/stylesheets/css3buttons.css index f737bfe..dbfa550 100644 --- a/stylesheets/css3buttons.css +++ b/stylesheets/css3buttons.css @@ -1,79 +1,290 @@ -a.button { display: inline-block; padding: 3px 5px 3px 5px; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-background-clip: padding-box; border-radius: 2px; outline: none; position: relative; zoom: 1; *display: inline; } -a.button.primary { font-weight: bold } -a.button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; } +a.button { + position: relative; + overflow: visible; + display: inline-block; + padding: 3px 5px; + border: 1px solid #CACACA; + text-decoration: none; + text-shadow: 1px 1px 0 #fff; + font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; + font-size: 12px; + color: #3C3C3D; + background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat; + white-space: nowrap; + cursor: pointer; + outline: none; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding-box; + -o-background-clip: padding-box; + background-clip: padding-box; + /* IE hacks */ + zoom: 1; + *display: inline; +} + +a.button.primary { + font-weight: bold; +} + +a.button:hover, +a.button:focus { + border-color: #388AD4; + text-decoration: none; + text-shadow: -1px -1px 0 rgba(0,0,0,0.3); + color: #fff; + background-position: 0 -40px; + background-color: #2D7DC5; +} + +a.button:active { + top: 1px; +} + a.button:active, -a.button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; } -a.button:active { top: 1px } -a.button.negative:hover { color: #FFFFFF; background-position: 0 -121px; background-color: #D84743; border-color: #911D1B; } +a.button.active { + border-color: #347BBA; + text-shadow: none; + color: #fff; + background-position: 0 -81px; + background-color: #0F5EA2; +} + +/* Negative style */ + +a.button.negative:hover, +a.button.negative:focus { + border-color: #911D1B; + color: #fff; + background-position: 0 -121px; + background-color: #D84743; +} + a.button.negative:active, -a.button.negative.active { background-position: 0 -161px; background-color: #A5211E; border-color: #911D1B; } -a.button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; padding: 2px 10px 2px 10px; } -a.button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; } -a.button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-right: none; border-left: none; } -a.button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; } +a.button.negative.active { + border-color: #911D1B; + background-position: 0 -161px; + background-color: #A5211E; +} + +/* Pill style */ + +a.button.pill { + padding: 2px 10px; + -webkit-border-radius: 19px; + -moz-border-radius: 19px; + border-radius: 19px; +} + +/* Grouped style */ + +a.button.left { + margin-right: 0; + -webkit-border-bottom-right-radius: 0; + -webkit-border-top-right-radius: 0; + -moz-border-radius-bottomright: 0; + -moz-border-radius-topright: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +a.button.middle { + border-right: 0; + border-left: 0; + margin-right: 0; + margin-left: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +a.button.right { + margin-left: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + a.button.left:active, a.button.middle:active, -a.button.right:active { top: 0px } -a.button.big { font-size: 16px; padding-left: 17px; padding-right: 17px; } -a.button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 2px; background-image: url('../images/css3buttons_icons.png'); background-repeat: no-repeat; } -a.big.button span.icon { top: 0px } -a.button span.icon.book { background-position: 0 0 } -a.button:hover span.icon.book { background-position: 0 -15px } -a.button span.icon.calendar { background-position: 0 -30px } -a.button:hover span.icon.calendar { background-position: 0 -45px } -a.button span.icon.chat { background-position: 0 -60px } -a.button:hover span.icon.chat { background-position: 0 -75px } -a.button span.icon.check { background-position: 0 -90px } -a.button:hover span.icon.check { background-position: 0 -103px } -a.button span.icon.clock { background-position: 0 -116px } -a.button:hover span.icon.clock { background-position: 0 -131px } -a.button span.icon.cog { background-position: 0 -146px } -a.button:hover span.icon.cog { background-position: 0 -161px } -a.button span.icon.comment { background-position: 0 -176px } -a.button:hover span.icon.comment { background-position: 0 -190px } -a.button span.icon.cross { background-position: 0 -204px } -a.button:hover span.icon.cross { background-position: 0 -219px } -a.button span.icon.downarrow { background-position: 0 -234px } -a.button:hover span.icon.downarrow { background-position: 0 -249px } -a.button span.icon.fork { background-position: 0 -264px } -a.button:hover span.icon.fork { background-position: 0 -279px } -a.button span.icon.heart { background-position: 0 -294px } -a.button:hover span.icon.heart { background-position: 0 -308px } -a.button span.icon.home { background-position: 0 -322px } -a.button:hover span.icon.home { background-position: 0 -337px } -a.button span.icon.key { background-position: 0 -352px } -a.button:hover span.icon.key { background-position: 0 -367px } -a.button span.icon.leftarrow { background-position: 0 -382px } -a.button:hover span.icon.leftarrow { background-position: 0 -397px } -a.button span.icon.lock { background-position: 0 -412px } -a.button:hover span.icon.lock { background-position: 0 -427px } -a.button span.icon.loop { background-position: 0 -442px } -a.button:hover span.icon.loop { background-position: 0 -457px } -a.button span.icon.magnifier { background-position: 0 -472px } -a.button:hover span.icon.magnifier { background-position: 0 -487px } -a.button span.icon.mail { background-position: 0 -502px } -a.button:hover span.icon.mail { background-position: 0 -514px } -a.button span.icon.move { background-position: 0 -526px } -a.button:hover span.icon.move { background-position: 0 -541px } -a.button span.icon.pen { background-position: 0 -556px } -a.button:hover span.icon.pen { background-position: 0 -571px } -a.button span.icon.pin { background-position: 0 -586px } -a.button:hover span.icon.pin { background-position: 0 -601px } -a.button span.icon.plus { background-position: 0 -616px } -a.button:hover span.icon.plus { background-position: 0 -631px } -a.button span.icon.reload { background-position: 0 -646px } -a.button:hover span.icon.reload { background-position: 0 -660px } -a.button span.icon.rightarrow { background-position: 0 -674px } -a.button:hover span.icon.rightarrow { background-position: 0 -689px } -a.button span.icon.rss { background-position: 0 -704px } -a.button:hover span.icon.rss { background-position: 0 -719px } -a.button span.icon.tag { background-position: 0 -734px } -a.button:hover span.icon.tag { background-position: 0 -749px } -a.button span.icon.trash { background-position: 0 -764px } -a.button:hover span.icon.trash { background-position: 0 -779px } -a.button span.icon.unlock { background-position: 0 -794px } -a.button:hover span.icon.unlock { background-position: 0 -809px } -a.button span.icon.uparrow { background-position: 0 -824px } -a.button:hover span.icon.uparrow { background-position: 0 -839px } -a.button span.icon.user { background-position: 0 -854px } -a.button:hover span.icon.user { background-position: 0 -869px } +a.button.right:active { + top: 0; +} + +/* Big style */ + +a.button.big { + padding-left: 17px; + padding-right: 17px; + font-size: 16px; +} + +/* With icon */ + +a.button .icon { + position: relative; + top: 2px; + display: inline-block; + width: 14px; + height: 12px; + margin: 0 7px 0 0; + background-image: url('../images/css3buttons_icons.png'); + background-repeat: no-repeat; +} + +a.big.button .icon { top: 0; } + +a.button .book { background-position: 0 0; } +a.button:hover .book, +a.button:focus .book, +a.button:active .book { background-position: 0 -15px; } + +a.button .calendar { background-position: 0 -30px; } +a.button:hover .calendar, +a.button:focus .calendar, +a.button:active .calendar { background-position: 0 -45px; } + +a.button .chat { background-position: 0 -60px; } +a.button:hover .chat, +a.button:focus .chat, +a.button:active .chat { background-position: 0 -75px; } + +a.button .check { background-position: 0 -90px; } +a.button:hover .check, +a.button:focus .check, +a.button:active .check { background-position: 0 -103px; } + +a.button .clock { background-position: 0 -116px; } +a.button:hover .clock, +a.button:focus .clock, +a.button:active .clock { background-position: 0 -131px; } + +a.button .cog { background-position: 0 -146px; } +a.button:hover .cog, +a.button:focus .cog, +a.button:active .cog { background-position: 0 -161px; } + +a.button .comment { background-position: 0 -176px; } +a.button:hover .comment, +a.button:focus .comment, +a.button:active .comment { background-position: 0 -190px; } + +a.button .cross { background-position: 0 -204px; } +a.button:hover .cross, +a.button:focus .cross, +a.button:active .cross { background-position: 0 -219px; } + +a.button .downarrow { background-position: 0 -234px; } +a.button:hover .downarrow, +a.button:focus .downarrow, +a.button:active .downarrow { background-position: 0 -249px; } + +a.button .fork { background-position: 0 -264px; } +a.button:hover .fork, +a.button:focus .fork, +a.button:active .fork { background-position: 0 -279px; } + +a.button .heart { background-position: 0 -294px; } +a.button:hover .heart, +a.button:focus .heart, +a.button:active .heart { background-position: 0 -308px; } + +a.button .home { background-position: 0 -322px; } +a.button:hover .home, +a.button:focus .home, +a.button:active .home { background-position: 0 -337px; } + +a.button .key { background-position: 0 -352px; } +a.button:hover .key, +a.button:focus .key, +a.button:active .key { background-position: 0 -367px; } + +a.button .leftarrow { background-position: 0 -382px; } +a.button:hover .leftarrow, +a.button:focus .leftarrow, +a.button:active .leftarrow { background-position: 0 -397px; } + +a.button .lock { background-position: 0 -412px; } +a.button:hover .lock, +a.button:focus .lock, +a.button:active .lock { background-position: 0 -427px; } + +a.button .loop { background-position: 0 -442px; } +a.button:hover .loop, +a.button:focus .loop, +a.button:active .loop { background-position: 0 -457px; } + +a.button .magnifier { background-position: 0 -472px; } +a.button:hover .magnifier, +a.button:focus .magnifier, +a.button:active .magnifier { background-position: 0 -487px; } + +a.button .mail { background-position: 0 -502px; } +a.button:hover .mail, +a.button:focus .mail, +a.button:active .mail { background-position: 0 -514px; } + +a.button .move { background-position: 0 -526px; } +a.button:hover .move, +a.button:focus .move, +a.button:active .move { background-position: 0 -541px; } + +a.button .pen { background-position: 0 -556px; } +a.button:hover .pen, +a.button:focus .pen, +a.button:active .pen { background-position: 0 -571px; } + +a.button .pin { background-position: 0 -586px; } +a.button:hover .pin, +a.button:focus .pin, +a.button:active .pin { background-position: 0 -601px; } + +a.button .plus { background-position: 0 -616px; } +a.button:hover .plus, +a.button:focus .plus, +a.button:active .plus { background-position: 0 -631px; } + +a.button .reload { background-position: 0 -646px; } +a.button:hover .reload, +a.button:focus .reload, +a.button:active .reload { background-position: 0 -660px; } + +a.button .rightarrow { background-position: 0 -674px; } +a.button:hover .rightarrow, +a.button:focus .rightarrow, +a.button:active .rightarrow { background-position: 0 -689px; } + +a.button .rss { background-position: 0 -704px; } +a.button:hover .rss, +a.button:focus .rss, +a.button:active .rss { background-position: 0 -719px; } + +a.button .tag { background-position: 0 -734px; } +a.button:hover .tag, +a.button:focus .tag, +a.button:active .tag { background-position: 0 -749px; } + +a.button .trash { background-position: 0 -764px; } +a.button:hover .trash, +a.button:focus .trash, +a.button:active .trash { background-position: 0 -779px; } + +a.button .unlock { background-position: 0 -794px; } +a.button:hover .unlock, +a.button:focus .unlock, +a.button:active .unlock { background-position: 0 -809px; } + +a.button .uparrow { background-position: 0 -824px; } +a.button:hover .uparrow, +a.button:focus .uparrow, +a.button:active .uparrow { background-position: 0 -839px; } + +a.button .user { background-position: 0 -854px; } +a.button:hover .user, +a.button:focus .user, +a.button:active .user { background-position: 0 -869px; } From d59ad7d207952a9b52f654d66df963d330099853 Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 1 Mar 2011 13:56:24 +0000 Subject: [PATCH 03/41] Added button line-height of normal, to provide independence over the value set in demo.css. Changed padding and border-radius values to em units, works better with different font sizes. --- stylesheets/css3buttons.css | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/stylesheets/css3buttons.css b/stylesheets/css3buttons.css index dbfa550..7788351 100644 --- a/stylesheets/css3buttons.css +++ b/stylesheets/css3buttons.css @@ -2,20 +2,19 @@ a.button { position: relative; overflow: visible; display: inline-block; - padding: 3px 5px; + padding: 0.5em 1em; border: 1px solid #CACACA; text-decoration: none; text-shadow: 1px 1px 0 #fff; - font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; - font-size: 12px; + font:12px/normal 'lucida grande', tahoma, verdana, arial, sans-serif; color: #3C3C3D; background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; cursor: pointer; outline: none; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; -o-background-clip: padding-box; @@ -72,10 +71,9 @@ a.button.negative.active { /* Pill style */ a.button.pill { - padding: 2px 10px; - -webkit-border-radius: 19px; - -moz-border-radius: 19px; - border-radius: 19px; + -webkit-border-radius: 50em; + -moz-border-radius: 50em; + border-radius: 50em; } /* Grouped style */ @@ -119,8 +117,6 @@ a.button.right:active { /* Big style */ a.button.big { - padding-left: 17px; - padding-right: 17px; font-size: 16px; } @@ -128,11 +124,11 @@ a.button.big { a.button .icon { position: relative; - top: 2px; - display: inline-block; + top: 1px; + display:inline-block; width: 14px; height: 12px; - margin: 0 7px 0 0; + margin: 0 0.5em 0 -0.25em; background-image: url('../images/css3buttons_icons.png'); background-repeat: no-repeat; } From 5e8dcf109ca6852397c57254f4b89c4ced085f7a Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 1 Mar 2011 14:37:51 +0000 Subject: [PATCH 04/41] Complete reworking of how backgrounds are done. Replaced external image with CSS gradient. Easier to modify and gives further independence from font size. Interaction states modified to be much closer to github's style. --- demo.html | 2 +- images/css3buttons_backgrounds.png | Bin 1367 -> 0 bytes stylesheets/css3buttons.css | 117 ++++++++++++++++++++++------- 3 files changed, 89 insertions(+), 30 deletions(-) delete mode 100644 images/css3buttons_backgrounds.png diff --git a/demo.html b/demo.html index dc52f2b..a90cffe 100644 --- a/demo.html +++ b/demo.html @@ -315,7 +315,7 @@

Installation

  1. Drop css3buttons.css in your stylesheets folder
    2. -
  2. Drop css3buttons_backgrounds.png and css3buttons_icons.png in your images folder
    3. +
  3. Drop css3buttons_icons.png in your images folder
  4. Link to css3buttons.css in the head section of your HTML page (see code example below)
diff --git a/images/css3buttons_backgrounds.png b/images/css3buttons_backgrounds.png deleted file mode 100644 index 7e440cd716b2fd0d07af5571bece6d2afd472cfc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1367 zcmah}Ye^84%m5X5;uE3CAVF z2N9nKtOSqrVt}o#u!ao`Oz-VzRsdAU5?8-h#`yueUg8f`IEZS-7|`VfI;%CEN6Z_3 zu0odpbaDWNS1qDMJRHmR_`Dr_xU)E#1e!2pWLmb^BVoa2Gvpw~q=lIH5>?Y&xBxWz z*NxjilaK~55RCa{c$#P~_2t3DZG3y|vng}6D0jCI z#My|y@GRD~poA$rDlUvizOzl(O8?gbApmZ<@asRjSh~Jq>##>J)O}ldzEYVP3KJ%WOaAZiLYPi4 zm)4>fuRcZbwC|HcBh!0^Ks1645RQAC`E<1zD|`h zFyKz-!VckBG`%ANfd4hHIG)TINi`%wGYq>1VIcU+emL6- zTzGg99Sh=fEZp~?2wT-rD4B}e&}az2lSkI#HsltX0deL+Ponc_lh_f136mFE?NR|u zwfG>yItDV??GKt8K|5?&x=5ocBaK?T5(b^3mmefflDk;meW59+wLs`>!Al&@=hUAU z3i;M!d2aw3W)G^X{X%yu2?zPNOG=N0t3t6%CX?Q0p@bXT%sUqP%f<@03+t}umec*L zm^iQZshUyRPDlMJ*1#d<+6Ra;G_x8&T>fZ>;2#P=Tq6iDN({G_ajy7NX5^-~D^Az` E2JT=&k^lez diff --git a/stylesheets/css3buttons.css b/stylesheets/css3buttons.css index 7788351..e4ea08d 100644 --- a/stylesheets/css3buttons.css +++ b/stylesheets/css3buttons.css @@ -3,15 +3,28 @@ a.button { overflow: visible; display: inline-block; padding: 0.5em 1em; - border: 1px solid #CACACA; + border: 1px solid #d4d4d4; text-decoration: none; text-shadow: 1px 1px 0 #fff; font:12px/normal 'lucida grande', tahoma, verdana, arial, sans-serif; - color: #3C3C3D; - background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat; + color: #333; white-space: nowrap; cursor: pointer; outline: none; + background-color: #ececec; + background-image: -webkit-gradient( + linear, 0 0, 0 100%, + from(#f4f4f4), + to(#ececec) + ); + background-image: -moz-linear-gradient( + #f4f4f4, + #ececec + ); + background-image: linear-gradient( + #f4f4f4, + #ececec + ); -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; @@ -29,43 +42,95 @@ a.button.primary { } a.button:hover, -a.button:focus { - border-color: #388AD4; +a.button:focus, +a.button:active { + border-color: #3072b3; + border-bottom-color: #2a65a0; + text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); color: #fff; - background-position: 0 -40px; - background-color: #2D7DC5; -} - -a.button:active { - top: 1px; + background-color: #3072b3; + background-image: -webkit-gradient( + linear, 0 0, 0 100%, + from(#599bdc), + to(#3072b3) + ); + background-image: -moz-linear-gradient( + #599bdc, + #3072b3 + ); + background-image: linear-gradient( + #599bdc, + #3072b3 + ); } a.button:active, a.button.active { - border-color: #347BBA; - text-shadow: none; + border-color:#2a65a0; + border-bottom-color:#3884CF; color: #fff; - background-position: 0 -81px; - background-color: #0F5EA2; + background-color: #3072b3; + background-image: -webkit-gradient( + linear, 0 0, 0 100%, + from(#3072b3), + to(#599bdc) + ); + background-image: -moz-linear-gradient( + #3072b3, + #599bdc + ); + background-image: linear-gradient( + #3072b3, + #599bdc + ); } /* Negative style */ +a.button.negative { + color:#900; +} + a.button.negative:hover, -a.button.negative:focus { - border-color: #911D1B; +a.button.negative:focus { + border-color: #b53f3a; + border-bottom-color:#a0302a; color: #fff; - background-position: 0 -121px; - background-color: #D84743; + background: #dc5f59; + background: -webkit-gradient( + linear, 0 0, 0 100%, + from(#dc5f59), + to(#b33630) + ); + background: -moz-linear-gradient( + #dc5f59, + #b33630 + ); + background: linear-gradient( + #dc5f59, + #b33630 + ); } a.button.negative:active, -a.button.negative.active { - border-color: #911D1B; - background-position: 0 -161px; - background-color: #A5211E; +a.button.negative.active { + border-color: #a0302a; + border-bottom-color: #bf4843; + background: #b33630; + background: -webkit-gradient(linear, 0 0, 0 100%, + from(#b33630), + to(#dc5f59) + ); + background: -moz-linear-gradient( + #b33630, + #dc5f59 + ); + background: linear-gradient( + #b33630, + #dc5f59 + ); } /* Pill style */ @@ -108,12 +173,6 @@ a.button.right { border-bottom-left-radius: 0; } -a.button.left:active, -a.button.middle:active, -a.button.right:active { - top: 0; -} - /* Big style */ a.button.big { From 3768893d43a281372e8b86263e6bbc49d8b53482 Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 1 Mar 2011 15:27:25 +0000 Subject: [PATCH 05/41] Demo page: cleaned up HTML a little, added JS shim, removed reset.css and merged what was needed into demo.css, removed empty spans used for icons --- demo.html | 738 ++++++++++++++++++++---------------------- stylesheets/demo.css | 78 +++-- stylesheets/reset.css | 67 ---- 3 files changed, 399 insertions(+), 484 deletions(-) delete mode 100644 stylesheets/reset.css diff --git a/demo.html b/demo.html index a90cffe..52c9b05 100644 --- a/demo.html +++ b/demo.html @@ -1,407 +1,365 @@ - - CSS3 Buttons | Simple CSS3 framework for creating button links - - - - - + + + CSS3 Buttons | Simple CSS3 framework for creating button links + + + + -
-
-

CSS3 Buttons

-
- -
-
-

What is this?

- -

- CSS3 buttons is a simple framework - for creating good-looking GitHub style button links. -

-
- -
-

Buttons

- -

To create a button, the only thing you have to do is this:

- -
-

Code:

- 
<a href="#" class="button">This is a Button</a>
-
- -

Result:

-
- This is a Button -
-
- -

If you prefer a pill-like button with more rounded corners, you can add a .pill class to the button

- -
-

Code:

- 
<a href="#" class="pill button">This is a Pill Button</a>
-
- -

Result:

-
- This is a Pill Button -
-
- -

- Sometimes when you have multiple buttons, it's considered good practice to highlight the button with the primary action in order to give - the user a visual clue of what action to take if in doubt. This can be accomplished by adding a .primary class - to the button -

- -
-

Code:

- 
<a href="#" class="primary button">Publish Post</a> or <a href="#" class="button">Save as Draft</a>
-
- -

Result:

-
- Publish Post or Save as Draft -
-
-
- -
-

Buttons with negative actions

- -

- If you have a button that triggers a negative action, like deleting data, it's good practice to warn the user by - styling the button differently than the normal buttons. Give a button the class .negative and the hover-state - will change to red -

- -
-

Code:

- 
<a href="#" class="negative button">Divide by Zero</a>
-
- -

Result:

-
- Divide by Zero -
-
- -
- -
-

Grouped buttons

- -

- You can create grouped buttons that are linked together, like seen at Gmail and other places, by using the .left, .middle and .right classes: -

- -
-

Code:

+
+
+

CSS3 Buttons

+
+ +
+
+

What is this?

+

CSS3 buttons is a simple framework for creating good-looking GitHub style button links.

+
+ +
+

Buttons

+

To create a button, the only thing you have to do is this:

+ +
+

Code:

+ 
<a href="#" class="button">This is a Button</a>
+
+ +

Result:

+ This is a Button +
+ +

If you prefer a pill-like button with more rounded corners, you can add a .pill class to the button

+ +
+

Code:

+ 
<a href="#" class="pill button">This is a Pill Button</a>
+
+ +

Result:

+ This is a Pill Button +
+ +

Sometimes when you have multiple buttons, it's considered good practice to highlight the button with the primary action in order to give the user a visual clue of what action to take if in doubt. This can be accomplished by adding a .primary class to the button.

+ +
+

Code:

+ 
<a href="#" class="primary button">Publish Post</a> or <a href="#" class="button">Save as Draft</a>
+
+ +

Result:

+ Publish Post or Save as Draft +
+
+ +
+

Buttons with dangerous actions

+

If you have a button that triggers a dangerous action, like deleting data, it's good practice to warn the user by styling the button differently than the normal buttons. Give a button the class .danger and the hover-state will change to red.

+ +
+

Code:

+ 
<a href="#" class="danger button">Divide by Zero</a>
+
+ +

Result:

+ Divide by Zero +
+
+ +
+

Grouped buttons

+

You can create grouped buttons that are linked together, like seen at Gmail and other places, by using the .left, .middle and .right classes:

+ +
+

Code:

<a href="#" class="left primary button">Archive</a>
 <a href="#" class="middle button">Report Spam</a>
-<a href="#" class="right negative button">Delete</a>
+<a href="#" class="right danger button">Delete</a>
-

Result:

- ArchiveReport SpamDelete -
- -

- You can also add the pill class to grouped buttons if preferred: -

- - + +

You can also add the pill class to grouped buttons if preferred:

+ +
+

Code:

<a href="#" class="left primary pill button">Archive</a>
 <a href="#" class="middle pill button">Report Spam</a>
-<a href="#" class="right negative pill button">Delete</a>
-
- -

Result:

- ArchiveReport SpamDelete -
-
- -
-

Buttons with icons

- -

- CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a span tag inside the anchor tag - with the class of .icon and any one of the provided icon classes: -

- -
-

Code:

- 
<a href="#" class="button"><span class="magnifier icon"></span>Search</a>
-
- -

Result:

- Search -
- -

Here is a list of all the supported icon classes:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassExample
.bookView Log
.calendarAdd to Calendar
.chatStart Chat
.checkApprove Registration
.clockRegister Work Time
.cogSettings
.commentAdd Comment
.crossRemove Item
.downarrowMove Down
.forkCreate Branch
.heartAdd to Favorites
.homeBack to Frontpage
.keyPassword Protect
.leftarrowMove Left
.lockLock Article
.loopResend Message
.magnifierSearch
.mailSend Newsletter
.moveMove
.penEdit Post
.pinPin to Map
.plusAdd Post
.reloadReload Page
.rightarrowMove Right
.rssSubscribe to RSS Feed
.tagAdd Tag
.trashDelete Post
.unlockUnlock Article
.uparrowMove Up
.userAdd New User
-
-
- -
-

Big buttons

- -

- If you wish to emphasize a specific action you can add the .big class to make a more prominent call-to-action - button: -

- -
-

Code:

- 
<a href="#" class="big button">Create Project</a>
-
- -

Result:

- Create Project -
- -
- -
-

Browser compatibility

- -

- CSS3 Buttons works in all major browsers -

- -

- Note: Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers! (IE 8 and under) -

-
- -
-

Installation

- -
    -
  1. Drop css3buttons.css in your stylesheets folder
    2. -
  2. Drop css3buttons_icons.png in your images folder
    3. -
  3. Link to css3buttons.css in the head section of your HTML page (see code example below)
    4. -
- -
-

Code:

- 
<link rel="stylesheet" href="stylesheets/css3buttons.css" media="screen">
-
-
- -

- CSS3 Buttons expects that some kind of CSS reset is in place in your project, otherwise the look might not be, as seen here -

-
- -
-

License

- -

The Unlicense:

- -
-

- This is free and unencumbered software released into the public domain. -

+<a href="#" class="right danger pill button">Delete</a> + + +

Result:

+ ArchiveReport SpamDelete +
+
+ +
+

Buttons with icons

+ +

CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a span tag inside the anchor tag with the class of .icon and any one of the provided icon classes:

+ +
+

Code:

+ 
<a href="#" class="button"><span class="magnifier icon"></span>Search</a>
+
+ +

Result:

+ Search +
+ +

Here is a list of all the supported icon classes:

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassExample
.bookView Log
.calendarAdd to Calendar
.chatStart Chat
.checkApprove Registration
.clockRegister Work Time
.cogSettings
.commentAdd Comment
.crossRemove Item
.downarrowMove Down
.forkCreate Branch
.heartAdd to Favorites
.homeBack to Frontpage
.keyPassword Protect
.leftarrowMove Left
.lockLock Article
.loopResend Message
.magnifierSearch
.mailSend Newsletter
.moveMove
.penEdit Post
.pinPin to Map
.plusAdd Post
.reloadReload Page
.rightarrowMove Right
.rssSubscribe to RSS Feed
.tagAdd Tag
.trashDelete Post
.unlockUnlock Article
.uparrowMove Up
.userAdd New User
+
+
+ +
+

Big buttons

+

If you wish to emphasize a specific action you can add the .big class to make a more prominent call-to-action button:

+ +
+

Code:

+ 
<a href="#" class="big button">Create Project</a>
+
+ +

Result:

+ Create Project +
+
+ +
+

Browser compatibility

+

CSS3 Buttons works in all major browsers

+ +

Note: Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers! (IE 8 and under). +

+
+ +
+

Installation

+ +
    +
  1. Drop css3buttons.css in your stylesheets folder
    2. +
  2. Drop css3buttons_icons.png in your images folder
    3. +
  3. Link to css3buttons.css in the head section of your HTML page (see code example below)
    4. +
+ +
+

Code:

+ 
<link rel="stylesheet" href="stylesheets/css3buttons.css" media="screen">
+
+
+ +

CSS3 Buttons expects that some kind of CSS reset is in place in your project, otherwise the look might not be, as seen here. +

+
+ +
+

License

+

The Unlicense:

+ +
+

+ This is free and unencumbered software released into the public domain. +

-

- Anyone is free to copy, modify, publish, use, compile, sell, or - distribute this software, either in source code form or as a compiled - binary, for any purpose, commercial or non-commercial, and by any - means. -

+

+ Anyone is free to copy, modify, publish, use, compile, sell, or + distribute this software, either in source code form or as a compiled + binary, for any purpose, commercial or non-commercial, and by any + means. +

-

- In jurisdictions that recognize copyright laws, the author or authors - of this software dedicate any and all copyright interest in the - software to the public domain. We make this dedication for the benefit - of the public at large and to the detriment of our heirs and - successors. We intend this dedication to be an overt act of - relinquishment in perpetuity of all present and future rights to this - software under copyright law. -

+

+ In jurisdictions that recognize copyright laws, the author or authors + of this software dedicate any and all copyright interest in the + software to the public domain. We make this dedication for the benefit + of the public at large and to the detriment of our heirs and + successors. We intend this dedication to be an overt act of + relinquishment in perpetuity of all present and future rights to this + software under copyright law. +

-

- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF - MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. - IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR - OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, - ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - OTHER DEALINGS IN THE SOFTWARE. -

+

+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, + EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF + MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. + IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR + OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, + ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR + OTHER DEALINGS IN THE SOFTWARE. +

-

- For more information, please refer to <http://unlicense.org/> -

-
-
- -
-

Shout-Outs

- - -
- -
-

Contact

- -

Found a Bug?

-

- Please create a ticket on GitHub With a description of the problem, browser and operating system information and how to reproduce the problem. -

- -

Need Help?

-

- You can send me a private message on GitHub and I'll do my best to help you. -

-
-
- - -
- - Fork me on GitHub +

+ For more information, please refer to <http://unlicense.org/> +

+ + + +
+

Shout-Outs

+ + +
+ +
+

Contact

+ +

Found a Bug?

+

+ Please create a ticket on GitHub With a description of the problem, browser and operating system information and how to reproduce the problem. +

+ +

Need Help?

+

+ You can send me a private message on GitHub and I'll do my best to help you. +

+
+ + + + + + Fork me on GitHub diff --git a/stylesheets/demo.css b/stylesheets/demo.css index 8e6d2bd..401c823 100644 --- a/stylesheets/demo.css +++ b/stylesheets/demo.css @@ -1,30 +1,54 @@ /** * This is styling for the demo page and is not necessary to include in your projects */ - body { font-family: Helvetica, Arial, sans-serif; line-height: 1.5em; font-size: 14px; color: #444; background-color: #D5E9F6; } - h1#title { font-size: 37px; margin-bottom: 50px; color: #666; } - h2 { font-size: 21px; margin-bottom: 20px; } - h3 { font-size: 16px } - p { margin-bottom: 20px } - section { margin-bottom: 20px; padding: 10px; } - section.even { background-color: #EEE; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } - article.example { margin: 20px 0px 20px 0px; padding: 10px 0px 10px 0px; border-top: 1px dotted #CCCCCC; border-bottom: 1px dotted #CCCCCC; } - footer { font-size: 11px; color: #666; text-align: center; margin-top: 20px; } - footer a { color: #666 } - a { color: #980905 } - em { font-style: italic } - ul, - ol { margin: 20px auto 20px auto; padding-left: 30px; } - table { margin: 20px auto 20px auto } - th { font-weight: bold } - th, - td { padding: 5px } - blockquote { margin: 20px 0px 20px 0px } - .container { margin: 50px auto 100px auto; width: 750px; } - #main { padding: 10px; background-color: #FFFFFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } - code, - blockquote, - .code { font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif } - .code { color: #d1d1d1; background-color: #3F3F3F; margin: 0px 0px 20px 0px; padding: 5px; font-size: 13px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } - .notice { background-color: #FFF9D8; margin-top: 20px; padding: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } - .ribbon { position: absolute; top: 0; right: 0; border: 0; } \ No newline at end of file + + /* -------------------------------------------------------------- + * Basic reset +-------------------------------------------------------------- */ + +html, body, div, +h1, h2, h3, p, span, +code, pre { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} + +article, aside, figure, footer, header, hgroup, nav, section { display: block; } +a img { border: none; } + + /* -------------------------------------------------------------- + * Demo page styles +-------------------------------------------------------------- */ + +body { font: 14px/1.5 sans-serif; color: #444; background-color: #d5e9f6;} +h1 { font-size: 37px; margin-bottom: 50px; font-weight:normal; color: #666;} +h2 { font-size: 21px; margin-bottom: 20px; font-weight:normal;} +h3 { font-size: 16px; margin-bottom: 10px; font-weight:normal;} +p { margin-bottom: 20px } + +a { color: #980905 } +a:hover, a:focus, a:active {text-decoration:none;} + +em { font-style: italic } +ul, ol { padding-left: 30px; margin: 20px 0; } + +table { border-collapse: separate; border-spacing: 0; vertical-align: middle; margin: 20px auto 20px auto } +th { font-weight: bold } +th, td { padding: 5px; text-align: left; font-weight: normal; vertical-align: middle; } +blockquote { margin: 20px 0px 20px 0px } + +.code, blockquote, code { font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif } +.code { color: #d1d1d1; background-color: #3F3F3F; margin: 0px 0px 20px 0px; padding: 5px; font-size: 13px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } +.notice { background-color: #FFF9D8; margin-top: 20px; padding: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } +.ribbon { position: absolute; top: 0; right: 0; border: 0; } + +.container { margin: 50px auto 100px auto; width: 750px; } +#main { padding: 10px; background-color: #FFFFFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } + +section { margin-bottom: 20px; padding: 10px; } +section.even { background-color: #EEE; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } +article.example { margin: 20px 0px 20px 0px; padding: 10px 0px 10px 0px; border-top: 1px dotted #CCCCCC; border-bottom: 1px dotted #CCCCCC; } +footer { font-size: 11px; color: #666; text-align: center; margin-top: 20px; } +footer a { color: #666 } \ No newline at end of file diff --git a/stylesheets/reset.css b/stylesheets/reset.css deleted file mode 100644 index 1417c4c..0000000 --- a/stylesheets/reset.css +++ /dev/null @@ -1,67 +0,0 @@ -/* -------------------------------------------------------------- - - reset.css - * Resets default browser CSS. - --------------------------------------------------------------- */ - -html { - margin:0; - padding:0; - border:0; -} - -body, div, span, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, code, -del, dfn, em, img, q, dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, dialog, figure, footer, header, -hgroup, nav, section { - margin: 0; - padding: 0; - border: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; -} - -/* This helps to make newer HTML5 elements behave like DIVs in older browers */ -article, aside, dialog, figure, footer, header, -hgroup, nav, section { - display:block; -} - -/* Line-height should always be unitless! */ -body { - line-height: 1.5; - background: white; -} - -/* Tables still need 'cellspacing="0"' in the markup. */ -table { - border-collapse: separate; - border-spacing: 0; -} -/* float:none prevents the span-x classes from breaking table-cell display */ -caption, th, td { - text-align: left; - font-weight: normal; - float:none !important; -} -table, th, td { - vertical-align: middle; -} - -/* Remove possible quote marks (") from ,
. */ -blockquote:before, blockquote:after, q:before, q:after { content: ''; } -blockquote, q { quotes: "" ""; } - -/* Remove annoying border on linked images. */ -a img { border: none; } - -/* Remember to define your own focus styles! */ -:focus { outline: 0; } \ No newline at end of file From e5fe14254c5e509f8ddad9a66d92d5188432e699 Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 1 Mar 2011 15:28:12 +0000 Subject: [PATCH 06/41] Use pseudo-elements to insert icons instead of presentational HTML --- stylesheets/css3buttons.css | 317 ++++++++++++++++++------------------ 1 file changed, 159 insertions(+), 158 deletions(-) diff --git a/stylesheets/css3buttons.css b/stylesheets/css3buttons.css index e4ea08d..52dc916 100644 --- a/stylesheets/css3buttons.css +++ b/stylesheets/css3buttons.css @@ -87,14 +87,14 @@ a.button.active { ); } -/* Negative style */ +/* Danger style */ -a.button.negative { +a.button.danger { color:#900; } -a.button.negative:hover, -a.button.negative:focus { +a.button.danger:hover, +a.button.danger:focus { border-color: #b53f3a; border-bottom-color:#a0302a; color: #fff; @@ -114,8 +114,8 @@ a.button.negative:focus { ); } -a.button.negative:active, -a.button.negative.active { +a.button.danger:active, +a.button.danger.active { border-color: #a0302a; border-bottom-color: #bf4843; background: #b33630; @@ -181,7 +181,8 @@ a.button.big { /* With icon */ -a.button .icon { +a.button.icon:before { + content: ""; position: relative; top: 1px; display:inline-block; @@ -192,154 +193,154 @@ a.button .icon { background-repeat: no-repeat; } -a.big.button .icon { top: 0; } - -a.button .book { background-position: 0 0; } -a.button:hover .book, -a.button:focus .book, -a.button:active .book { background-position: 0 -15px; } - -a.button .calendar { background-position: 0 -30px; } -a.button:hover .calendar, -a.button:focus .calendar, -a.button:active .calendar { background-position: 0 -45px; } - -a.button .chat { background-position: 0 -60px; } -a.button:hover .chat, -a.button:focus .chat, -a.button:active .chat { background-position: 0 -75px; } - -a.button .check { background-position: 0 -90px; } -a.button:hover .check, -a.button:focus .check, -a.button:active .check { background-position: 0 -103px; } - -a.button .clock { background-position: 0 -116px; } -a.button:hover .clock, -a.button:focus .clock, -a.button:active .clock { background-position: 0 -131px; } - -a.button .cog { background-position: 0 -146px; } -a.button:hover .cog, -a.button:focus .cog, -a.button:active .cog { background-position: 0 -161px; } - -a.button .comment { background-position: 0 -176px; } -a.button:hover .comment, -a.button:focus .comment, -a.button:active .comment { background-position: 0 -190px; } - -a.button .cross { background-position: 0 -204px; } -a.button:hover .cross, -a.button:focus .cross, -a.button:active .cross { background-position: 0 -219px; } - -a.button .downarrow { background-position: 0 -234px; } -a.button:hover .downarrow, -a.button:focus .downarrow, -a.button:active .downarrow { background-position: 0 -249px; } - -a.button .fork { background-position: 0 -264px; } -a.button:hover .fork, -a.button:focus .fork, -a.button:active .fork { background-position: 0 -279px; } - -a.button .heart { background-position: 0 -294px; } -a.button:hover .heart, -a.button:focus .heart, -a.button:active .heart { background-position: 0 -308px; } - -a.button .home { background-position: 0 -322px; } -a.button:hover .home, -a.button:focus .home, -a.button:active .home { background-position: 0 -337px; } - -a.button .key { background-position: 0 -352px; } -a.button:hover .key, -a.button:focus .key, -a.button:active .key { background-position: 0 -367px; } - -a.button .leftarrow { background-position: 0 -382px; } -a.button:hover .leftarrow, -a.button:focus .leftarrow, -a.button:active .leftarrow { background-position: 0 -397px; } - -a.button .lock { background-position: 0 -412px; } -a.button:hover .lock, -a.button:focus .lock, -a.button:active .lock { background-position: 0 -427px; } - -a.button .loop { background-position: 0 -442px; } -a.button:hover .loop, -a.button:focus .loop, -a.button:active .loop { background-position: 0 -457px; } - -a.button .magnifier { background-position: 0 -472px; } -a.button:hover .magnifier, -a.button:focus .magnifier, -a.button:active .magnifier { background-position: 0 -487px; } - -a.button .mail { background-position: 0 -502px; } -a.button:hover .mail, -a.button:focus .mail, -a.button:active .mail { background-position: 0 -514px; } - -a.button .move { background-position: 0 -526px; } -a.button:hover .move, -a.button:focus .move, -a.button:active .move { background-position: 0 -541px; } - -a.button .pen { background-position: 0 -556px; } -a.button:hover .pen, -a.button:focus .pen, -a.button:active .pen { background-position: 0 -571px; } - -a.button .pin { background-position: 0 -586px; } -a.button:hover .pin, -a.button:focus .pin, -a.button:active .pin { background-position: 0 -601px; } - -a.button .plus { background-position: 0 -616px; } -a.button:hover .plus, -a.button:focus .plus, -a.button:active .plus { background-position: 0 -631px; } - -a.button .reload { background-position: 0 -646px; } -a.button:hover .reload, -a.button:focus .reload, -a.button:active .reload { background-position: 0 -660px; } - -a.button .rightarrow { background-position: 0 -674px; } -a.button:hover .rightarrow, -a.button:focus .rightarrow, -a.button:active .rightarrow { background-position: 0 -689px; } - -a.button .rss { background-position: 0 -704px; } -a.button:hover .rss, -a.button:focus .rss, -a.button:active .rss { background-position: 0 -719px; } - -a.button .tag { background-position: 0 -734px; } -a.button:hover .tag, -a.button:focus .tag, -a.button:active .tag { background-position: 0 -749px; } - -a.button .trash { background-position: 0 -764px; } -a.button:hover .trash, -a.button:focus .trash, -a.button:active .trash { background-position: 0 -779px; } - -a.button .unlock { background-position: 0 -794px; } -a.button:hover .unlock, -a.button:focus .unlock, -a.button:active .unlock { background-position: 0 -809px; } - -a.button .uparrow { background-position: 0 -824px; } -a.button:hover .uparrow, -a.button:focus .uparrow, -a.button:active .uparrow { background-position: 0 -839px; } - -a.button .user { background-position: 0 -854px; } -a.button:hover .user, -a.button:focus .user, -a.button:active .user { background-position: 0 -869px; } +a.big.button.icon:before { top: 0; } + +a.button.book.icon:before { background-position: 0 0; } +a.button.book.icon:hover:before, +a.button.book.icon:focus:before, +a.button.book.icon:active:before { background-position: 0 -15px; } + +a.button.calendar.icon:before { background-position: 0 -30px; } +a.button.calendar.icon:hover:before, +a.button.calendar.icon:focus:before, +a.button.calendar.icon:active:before { background-position: 0 -45px; } + +a.button.chat.icon:before { background-position: 0 -60px; } +a.button.chat.icon:hover:before, +a.button.chat.icon:focus:before, +a.button.chat.icon:active:before { background-position: 0 -75px; } + +a.button.check.icon:before { background-position: 0 -90px; } +a.button.check.icon:hover:before, +a.button.check.icon:focus:before, +a.button.check.icon:active:before { background-position: 0 -103px; } + +a.button.clock.icon:before { background-position: 0 -116px; } +a.button.clock.icon:hover:before, +a.button.clock.icon:focus:before, +a.button.clock.icon:active:before { background-position: 0 -131px; } + +a.button.cog.icon:before { background-position: 0 -146px; } +a.button.cog.icon:hover:before, +a.button.cog.icon:focus:before, +a.button.cog.icon:active:before { background-position: 0 -161px; } + +a.button.comment.icon:before { background-position: 0 -176px; } +a.button.comment.icon:hover:before, +a.button.comment.icon:focus:before, +a.button.comment.icon:active:before { background-position: 0 -190px; } + +a.button.cross.icon:before { background-position: 0 -204px; } +a.button.cross.icon:hover:before, +a.button.cross.icon:focus:before, +a.button.cross.icon:active:before { background-position: 0 -219px; } + +a.button.downarrow.icon:before { background-position: 0 -234px; } +a.button.downarrow.icon:hover:before, +a.button.downarrow.icon:focus:before, +a.button.downarrow.icon:active:before { background-position: 0 -249px; } + +a.button.fork.icon:before { background-position: 0 -264px; } +a.button.fork.icon:hover:before, +a.button.fork.icon:focus:before, +a.button.fork.icon:active:before { background-position: 0 -279px; } + +a.button.heart.icon:before { background-position: 0 -294px; } +a.button.heart.icon:hover:before, +a.button.heart.icon:focus:before, +a.button.heart.icon:active:before { background-position: 0 -308px; } + +a.button.home.icon:before { background-position: 0 -322px; } +a.button.home.icon:hover:before, +a.button.home.icon:focus:before, +a.button.home.icon:active:before { background-position: 0 -337px; } + +a.button.key.icon:before { background-position: 0 -352px; } +a.button.key.icon:hover:before, +a.button.key.icon:focus:before, +a.button.key.icon:active:before { background-position: 0 -367px; } + +a.button.leftarrow.icon:before { background-position: 0 -382px; } +a.button.leftarrow.icon:hover:before, +a.button.leftarrow.icon:focus:before, +a.button.leftarrow.icon:active:before { background-position: 0 -397px; } + +a.button.lock.icon:before { background-position: 0 -412px; } +a.button.lock.icon:hover:before, +a.button.lock.icon:focus:before, +a.button.lock.icon:active:before { background-position: 0 -427px; } + +a.button.loop.icon:before { background-position: 0 -442px; } +a.button.loop.icon:hover:before, +a.button.loop.icon:focus:before, +a.button.loop.icon:active:before { background-position: 0 -457px; } + +a.button.magnifier.icon:before { background-position: 0 -472px; } +a.button.magnifier.icon:hover:before, +a.button.magnifier.icon:focus:before, +a.button.magnifier.icon:active:before { background-position: 0 -487px; } + +a.button.mail.icon:before { background-position: 0 -502px; } +a.button.mail.icon:hover:before, +a.button.mail.icon:focus:before, +a.button.mail.icon:active:before { background-position: 0 -514px; } + +a.button.move.icon:before { background-position: 0 -526px; } +a.button.move.icon:hover:before, +a.button.move.icon:focus:before, +a.button.move.icon:active:before { background-position: 0 -541px; } + +a.button.pen.icon:before { background-position: 0 -556px; } +a.button.pen.icon:hover:before, +a.button.pen.icon:focus:before, +a.button.pen.icon:active:before { background-position: 0 -571px; } + +a.button.pin.icon:before { background-position: 0 -586px; } +a.button.pin.icon:hover:before, +a.button.pin.icon:focus:before, +a.button.pin.icon:active:before { background-position: 0 -601px; } + +a.button.plus.icon:before { background-position: 0 -616px; } +a.button.plus.icon:hover:before, +a.button.plus.icon:focus:before, +a.button.plus.icon:active:before { background-position: 0 -631px; } + +a.button.reload.icon:before { background-position: 0 -646px; } +a.button.reload.icon:hover:before, +a.button.reload.icon:focus:before, +a.button.reload.icon:active:before { background-position: 0 -660px; } + +a.button.rightarrow.icon:before { background-position: 0 -674px; } +a.button.rightarrow.icon:hover:before, +a.button.rightarrow.icon:focus:before, +a.button.rightarrow.icon:active:before { background-position: 0 -689px; } + +a.button.rss.icon:before { background-position: 0 -704px; } +a.button.rss.icon:hover:before, +a.button.rss.icon:focus:before, +a.button.rss.icon:active:before { background-position: 0 -719px; } + +a.button.tag.icon:before { background-position: 0 -734px; } +a.button.tag.icon:hover:before, +a.button.tag.icon:focus:before, +a.button.tag.icon:active:before { background-position: 0 -749px; } + +a.button.trash.icon:before { background-position: 0 -764px; } +a.button.trash.icon:hover:before, +a.button.trash.icon:focus:before, +a.button.trash.icon:active:before { background-position: 0 -779px; } + +a.button.unlock.icon:before { background-position: 0 -794px; } +a.button.unlock.icon:hover:before, +a.button.unlock.icon:focus:before, +a.button.unlock.icon:active:before { background-position: 0 -809px; } + +a.button.uparrow.icon:before { background-position: 0 -824px; } +a.button.uparrow.icon:hover:before, +a.button.uparrow.icon:focus:before, +a.button.uparrow.icon:active:before { background-position: 0 -839px; } + +a.button.user.icon:before { background-position: 0 -854px; } +a.button.user.icon:hover:before, +a.button.user.icon:focus:before, +a.button.user.icon:active:before { background-position: 0 -869px; } From f1eeb2441a8243d3927bccfb73847153455b113a Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 1 Mar 2011 18:33:19 +0000 Subject: [PATCH 07/41] Changed how button groups work. Uses a container (e.g. div or ul). Involved modifying how backgrounds are applied to the default button. Restructured CSS file. --- stylesheets/css3buttons.css | 485 ++++++++++++++++++++---------------- 1 file changed, 269 insertions(+), 216 deletions(-) diff --git a/stylesheets/css3buttons.css b/stylesheets/css3buttons.css index 52dc916..acd859b 100644 --- a/stylesheets/css3buttons.css +++ b/stylesheets/css3buttons.css @@ -1,4 +1,12 @@ -a.button { +/* ------------------------------------------ +CSS3 BUTTONS (GITHUB STYLE) +Licensed under Unlicense +------------------------------------------ */ + + +/* ------------------------------------------------------------------------------------------------------------- BUTTON */ + +.button { position: relative; overflow: visible; display: inline-block; @@ -11,20 +19,21 @@ a.button { white-space: nowrap; cursor: pointer; outline: none; - background-color: #ececec; - background-image: -webkit-gradient( + background: -webkit-gradient( linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec) ); - background-image: -moz-linear-gradient( + background: -moz-linear-gradient( #f4f4f4, #ececec ); - background-image: linear-gradient( + background: linear-gradient( #f4f4f4, #ececec - ); + ); + background-color: #fff; + -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; @@ -37,68 +46,235 @@ a.button { *display: inline; } -a.button.primary { - font-weight: bold; -} - -a.button:hover, -a.button:focus, -a.button:active { +.button:hover, +.button:focus, +.button:active { border-color: #3072b3; border-bottom-color: #2a65a0; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); color: #fff; - background-color: #3072b3; - background-image: -webkit-gradient( + background: -webkit-gradient( linear, 0 0, 0 100%, from(#599bdc), to(#3072b3) ); - background-image: -moz-linear-gradient( + background: -moz-linear-gradient( #599bdc, #3072b3 ); - background-image: linear-gradient( + background: linear-gradient( #599bdc, #3072b3 ); + background-color: #3072b3; } -a.button:active, -a.button.active { +.button:active, +.button.active { border-color:#2a65a0; border-bottom-color:#3884CF; color: #fff; - background-color: #3072b3; - background-image: -webkit-gradient( + background: -webkit-gradient( linear, 0 0, 0 100%, from(#3072b3), to(#599bdc) ); - background-image: -moz-linear-gradient( + background: -moz-linear-gradient( #3072b3, #599bdc ); - background-image: linear-gradient( + background: linear-gradient( #3072b3, #599bdc ); + background-color: #3072b3; } -/* Danger style */ +/* ............................................................................................................. Icons */ -a.button.danger { +.button.icon:before { + content: ""; + position: relative; + top: 1px; + display:inline-block; + width: 14px; + height: 12px; + margin: 0 0.5em 0 -0.25em; + background: url(../images/css3buttons_icons.png) no-repeat; +} + +.button.book.icon:before { background-position: 0 0; } +.button.book.icon:hover:before, +.button.book.icon:focus:before, +.button.book.icon:active:before { background-position: 0 -15px; } + +.button.calendar.icon:before { background-position: 0 -30px; } +.button.calendar.icon:hover:before, +.button.calendar.icon:focus:before, +.button.calendar.icon:active:before { background-position: 0 -45px; } + +.button.chat.icon:before { background-position: 0 -60px; } +.button.chat.icon:hover:before, +.button.chat.icon:focus:before, +.button.chat.icon:active:before { background-position: 0 -75px; } + +.button.check.icon:before { background-position: 0 -90px; } +.button.check.icon:hover:before, +.button.check.icon:focus:before, +.button.check.icon:active:before { background-position: 0 -103px; } + +.button.clock.icon:before { background-position: 0 -116px; } +.button.clock.icon:hover:before, +.button.clock.icon:focus:before, +.button.clock.icon:active:before { background-position: 0 -131px; } + +.button.cog.icon:before { background-position: 0 -146px; } +.button.cog.icon:hover:before, +.button.cog.icon:focus:before, +.button.cog.icon:active:before { background-position: 0 -161px; } + +.button.comment.icon:before { background-position: 0 -176px; } +.button.comment.icon:hover:before, +.button.comment.icon:focus:before, +.button.comment.icon:active:before { background-position: 0 -190px; } + +.button.cross.icon:before { background-position: 0 -204px; } +.button.cross.icon:hover:before, +.button.cross.icon:focus:before, +.button.cross.icon:active:before { background-position: 0 -219px; } + +.button.downarrow.icon:before { background-position: 0 -234px; } +.button.downarrow.icon:hover:before, +.button.downarrow.icon:focus:before, +.button.downarrow.icon:active:before { background-position: 0 -249px; } + +.button.fork.icon:before { background-position: 0 -264px; } +.button.fork.icon:hover:before, +.button.fork.icon:focus:before, +.button.fork.icon:active:before { background-position: 0 -279px; } + +.button.heart.icon:before { background-position: 0 -294px; } +.button.heart.icon:hover:before, +.button.heart.icon:focus:before, +.button.heart.icon:active:before { background-position: 0 -308px; } + +.button.home.icon:before { background-position: 0 -322px; } +.button.home.icon:hover:before, +.button.home.icon:focus:before, +.button.home.icon:active:before { background-position: 0 -337px; } + +.button.key.icon:before { background-position: 0 -352px; } +.button.key.icon:hover:before, +.button.key.icon:focus:before, +.button.key.icon:active:before { background-position: 0 -367px; } + +.button.leftarrow.icon:before { background-position: 0 -382px; } +.button.leftarrow.icon:hover:before, +.button.leftarrow.icon:focus:before, +.button.leftarrow.icon:active:before { background-position: 0 -397px; } + +.button.lock.icon:before { background-position: 0 -412px; } +.button.lock.icon:hover:before, +.button.lock.icon:focus:before, +.button.lock.icon:active:before { background-position: 0 -427px; } + +.button.loop.icon:before { background-position: 0 -442px; } +.button.loop.icon:hover:before, +.button.loop.icon:focus:before, +.button.loop.icon:active:before { background-position: 0 -457px; } + +.button.magnifier.icon:before { background-position: 0 -472px; } +.button.magnifier.icon:hover:before, +.button.magnifier.icon:focus:before, +.button.magnifier.icon:active:before { background-position: 0 -487px; } + +.button.mail.icon:before { background-position: 0 -502px; } +.button.mail.icon:hover:before, +.button.mail.icon:focus:before, +.button.mail.icon:active:before { background-position: 0 -514px; } + +.button.move.icon:before { background-position: 0 -526px; } +.button.move.icon:hover:before, +.button.move.icon:focus:before, +.button.move.icon:active:before { background-position: 0 -541px; } + +.button.pen.icon:before { background-position: 0 -556px; } +.button.pen.icon:hover:before, +.button.pen.icon:focus:before, +.button.pen.icon:active:before { background-position: 0 -571px; } + +.button.pin.icon:before { background-position: 0 -586px; } +.button.pin.icon:hover:before, +.button.pin.icon:focus:before, +.button.pin.icon:active:before { background-position: 0 -601px; } + +.button.plus.icon:before { background-position: 0 -616px; } +.button.plus.icon:hover:before, +.button.plus.icon:focus:before, +.button.plus.icon:active:before { background-position: 0 -631px; } + +.button.reload.icon:before { background-position: 0 -646px; } +.button.reload.icon:hover:before, +.button.reload.icon:focus:before, +.button.reload.icon:active:before { background-position: 0 -660px; } + +.button.rightarrow.icon:before { background-position: 0 -674px; } +.button.rightarrow.icon:hover:before, +.button.rightarrow.icon:focus:before, +.button.rightarrow.icon:active:before { background-position: 0 -689px; } + +.button.rss.icon:before { background-position: 0 -704px; } +.button.rss.icon:hover:before, +.button.rss.icon:focus:before, +.button.rss.icon:active:before { background-position: 0 -719px; } + +.button.tag.icon:before { background-position: 0 -734px; } +.button.tag.icon:hover:before, +.button.tag.icon:focus:before, +.button.tag.icon:active:before { background-position: 0 -749px; } + +.button.trash.icon:before { background-position: 0 -764px; } +.button.trash.icon:hover:before, +.button.trash.icon:focus:before, +.button.trash.icon:active:before { background-position: 0 -779px; } + +.button.unlock.icon:before { background-position: 0 -794px; } +.button.unlock.icon:hover:before, +.button.unlock.icon:focus:before, +.button.unlock.icon:active:before { background-position: 0 -809px; } + +.button.uparrow.icon:before { background-position: 0 -824px; } +.button.uparrow.icon:hover:before, +.button.uparrow.icon:focus:before, +.button.uparrow.icon:active:before { background-position: 0 -839px; } + +.button.user.icon:before { background-position: 0 -854px; } +.button.user.icon:hover:before, +.button.user.icon:focus:before, +.button.user.icon:active:before { background-position: 0 -869px; } + + +/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */ + +/* ............................................................................................................. Primary */ + +.button.primary { + font-weight: bold; +} + +/* ............................................................................................................. Danger */ + +.button.danger { color:#900; } -a.button.danger:hover, -a.button.danger:focus { +.button.danger:hover, +.button.danger:focus { border-color: #b53f3a; border-bottom-color:#a0302a; color: #fff; - background: #dc5f59; background: -webkit-gradient( linear, 0 0, 0 100%, from(#dc5f59), @@ -112,13 +288,13 @@ a.button.danger:focus { #dc5f59, #b33630 ); + background-color: #dc5f59; } -a.button.danger:active, -a.button.danger.active { +.button.danger:active, +.button.danger.active { border-color: #a0302a; border-bottom-color: #bf4843; - background: #b33630; background: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59) @@ -131,216 +307,93 @@ a.button.danger.active { #b33630, #dc5f59 ); + background-color: #b33630; } -/* Pill style */ +/* ............................................................................................................. Pill */ -a.button.pill { +.button.pill { -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; } -/* Grouped style */ +/* ............................................................................................................. Big */ -a.button.left { - margin-right: 0; - -webkit-border-bottom-right-radius: 0; +.button.big { + font-size: 16px; +} + +.button.big.icon:before { top: 0; } + +/* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */ + +/* ............................................................................................................. Standard */ + +.button-group { + display:inline-block; + list-style:none; + padding:0; + margin:0; +} + +.button-group + .button-group { + margin-left:15px; +} + +.button-group li { + padding:0; + margin:0; +} + +.button-group li, +.button-group > .button { + float:left; +} + +.button-group li > .button, +.button-group > .button { + margin-left: -1px; +} + +.button-group > .button:first-child, +.button-group li:first-child > .button { + margin-left: 0; -webkit-border-top-right-radius: 0; - -moz-border-radius-bottomright: 0; + -webkit-border-bottom-right-radius: 0; -moz-border-radius-topright: 0; - border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; border-top-right-radius: 0; + border-bottom-right-radius: 0; } -a.button.middle { - border-right: 0; - border-left: 0; - margin-right: 0; - margin-left: 0; +.button-group > .button:not(:first-child):not(:last-child), +.button-group li:not(:first-child):not(:last-child) > .button { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } -a.button.right { - margin-left: 0; - -webkit-border-bottom-left-radius: 0; +.button-group > .button:last-child, +.button-group li:last-child > .button { -webkit-border-top-left-radius: 0; - -moz-border-radius-bottomleft: 0; + -webkit-border-bottom-left-radius: 0; -moz-border-radius-topleft: 0; + -moz-border-radius-bottomleft: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } -/* Big style */ - -a.button.big { - font-size: 16px; -} - -/* With icon */ +/* ............................................................................................................. Minor */ -a.button.icon:before { - content: ""; - position: relative; - top: 1px; - display:inline-block; - width: 14px; - height: 12px; - margin: 0 0.5em 0 -0.25em; - background-image: url('../images/css3buttons_icons.png'); - background-repeat: no-repeat; +.button-group.minor-group .button { + text-shadow:none; + background-image:none; } -a.big.button.icon:before { top: 0; } - -a.button.book.icon:before { background-position: 0 0; } -a.button.book.icon:hover:before, -a.button.book.icon:focus:before, -a.button.book.icon:active:before { background-position: 0 -15px; } - -a.button.calendar.icon:before { background-position: 0 -30px; } -a.button.calendar.icon:hover:before, -a.button.calendar.icon:focus:before, -a.button.calendar.icon:active:before { background-position: 0 -45px; } - -a.button.chat.icon:before { background-position: 0 -60px; } -a.button.chat.icon:hover:before, -a.button.chat.icon:focus:before, -a.button.chat.icon:active:before { background-position: 0 -75px; } - -a.button.check.icon:before { background-position: 0 -90px; } -a.button.check.icon:hover:before, -a.button.check.icon:focus:before, -a.button.check.icon:active:before { background-position: 0 -103px; } - -a.button.clock.icon:before { background-position: 0 -116px; } -a.button.clock.icon:hover:before, -a.button.clock.icon:focus:before, -a.button.clock.icon:active:before { background-position: 0 -131px; } - -a.button.cog.icon:before { background-position: 0 -146px; } -a.button.cog.icon:hover:before, -a.button.cog.icon:focus:before, -a.button.cog.icon:active:before { background-position: 0 -161px; } - -a.button.comment.icon:before { background-position: 0 -176px; } -a.button.comment.icon:hover:before, -a.button.comment.icon:focus:before, -a.button.comment.icon:active:before { background-position: 0 -190px; } - -a.button.cross.icon:before { background-position: 0 -204px; } -a.button.cross.icon:hover:before, -a.button.cross.icon:focus:before, -a.button.cross.icon:active:before { background-position: 0 -219px; } - -a.button.downarrow.icon:before { background-position: 0 -234px; } -a.button.downarrow.icon:hover:before, -a.button.downarrow.icon:focus:before, -a.button.downarrow.icon:active:before { background-position: 0 -249px; } - -a.button.fork.icon:before { background-position: 0 -264px; } -a.button.fork.icon:hover:before, -a.button.fork.icon:focus:before, -a.button.fork.icon:active:before { background-position: 0 -279px; } - -a.button.heart.icon:before { background-position: 0 -294px; } -a.button.heart.icon:hover:before, -a.button.heart.icon:focus:before, -a.button.heart.icon:active:before { background-position: 0 -308px; } - -a.button.home.icon:before { background-position: 0 -322px; } -a.button.home.icon:hover:before, -a.button.home.icon:focus:before, -a.button.home.icon:active:before { background-position: 0 -337px; } - -a.button.key.icon:before { background-position: 0 -352px; } -a.button.key.icon:hover:before, -a.button.key.icon:focus:before, -a.button.key.icon:active:before { background-position: 0 -367px; } - -a.button.leftarrow.icon:before { background-position: 0 -382px; } -a.button.leftarrow.icon:hover:before, -a.button.leftarrow.icon:focus:before, -a.button.leftarrow.icon:active:before { background-position: 0 -397px; } - -a.button.lock.icon:before { background-position: 0 -412px; } -a.button.lock.icon:hover:before, -a.button.lock.icon:focus:before, -a.button.lock.icon:active:before { background-position: 0 -427px; } - -a.button.loop.icon:before { background-position: 0 -442px; } -a.button.loop.icon:hover:before, -a.button.loop.icon:focus:before, -a.button.loop.icon:active:before { background-position: 0 -457px; } - -a.button.magnifier.icon:before { background-position: 0 -472px; } -a.button.magnifier.icon:hover:before, -a.button.magnifier.icon:focus:before, -a.button.magnifier.icon:active:before { background-position: 0 -487px; } - -a.button.mail.icon:before { background-position: 0 -502px; } -a.button.mail.icon:hover:before, -a.button.mail.icon:focus:before, -a.button.mail.icon:active:before { background-position: 0 -514px; } - -a.button.move.icon:before { background-position: 0 -526px; } -a.button.move.icon:hover:before, -a.button.move.icon:focus:before, -a.button.move.icon:active:before { background-position: 0 -541px; } - -a.button.pen.icon:before { background-position: 0 -556px; } -a.button.pen.icon:hover:before, -a.button.pen.icon:focus:before, -a.button.pen.icon:active:before { background-position: 0 -571px; } - -a.button.pin.icon:before { background-position: 0 -586px; } -a.button.pin.icon:hover:before, -a.button.pin.icon:focus:before, -a.button.pin.icon:active:before { background-position: 0 -601px; } - -a.button.plus.icon:before { background-position: 0 -616px; } -a.button.plus.icon:hover:before, -a.button.plus.icon:focus:before, -a.button.plus.icon:active:before { background-position: 0 -631px; } - -a.button.reload.icon:before { background-position: 0 -646px; } -a.button.reload.icon:hover:before, -a.button.reload.icon:focus:before, -a.button.reload.icon:active:before { background-position: 0 -660px; } - -a.button.rightarrow.icon:before { background-position: 0 -674px; } -a.button.rightarrow.icon:hover:before, -a.button.rightarrow.icon:focus:before, -a.button.rightarrow.icon:active:before { background-position: 0 -689px; } - -a.button.rss.icon:before { background-position: 0 -704px; } -a.button.rss.icon:hover:before, -a.button.rss.icon:focus:before, -a.button.rss.icon:active:before { background-position: 0 -719px; } - -a.button.tag.icon:before { background-position: 0 -734px; } -a.button.tag.icon:hover:before, -a.button.tag.icon:focus:before, -a.button.tag.icon:active:before { background-position: 0 -749px; } - -a.button.trash.icon:before { background-position: 0 -764px; } -a.button.trash.icon:hover:before, -a.button.trash.icon:focus:before, -a.button.trash.icon:active:before { background-position: 0 -779px; } - -a.button.unlock.icon:before { background-position: 0 -794px; } -a.button.unlock.icon:hover:before, -a.button.unlock.icon:focus:before, -a.button.unlock.icon:active:before { background-position: 0 -809px; } - -a.button.uparrow.icon:before { background-position: 0 -824px; } -a.button.uparrow.icon:hover:before, -a.button.uparrow.icon:focus:before, -a.button.uparrow.icon:active:before { background-position: 0 -839px; } - -a.button.user.icon:before { background-position: 0 -854px; } -a.button.user.icon:hover:before, -a.button.user.icon:focus:before, -a.button.user.icon:active:before { background-position: 0 -869px; } +.button-group.minor-group .button:hover, +.button-group.minor-group .button:focus, +.button-group.minor-group .button:active { + text-shadow:none; + background-image:none; +} \ No newline at end of file From 379ea556daf061d7f58cbfcbac2dbb99711ff864 Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 1 Mar 2011 18:35:17 +0000 Subject: [PATCH 08/41] Modified and structured demo page HTML to include new group examples, and changed the page's look so that buttons are more prominent --- demo.html | 163 +++++++++++++++++++++++++------------------ stylesheets/demo.css | 8 +-- 2 files changed, 99 insertions(+), 72 deletions(-) diff --git a/demo.html b/demo.html index 52c9b05..ca42eec 100644 --- a/demo.html +++ b/demo.html @@ -12,7 +12,7 @@
-

CSS3 Buttons

+

CSS3 Buttons (Github style)

@@ -23,100 +23,132 @@

What is this?

Buttons

-

To create a button, the only thing you have to do is this:

-
+
+

To create a button, the only thing you have to do is this:

Code:

- 
<a href="#" class="button">This is a Button</a>
-
+ 
<a href="#" class="button">This is a Button</a>

Result:

This is a Button -
+
-

If you prefer a pill-like button with more rounded corners, you can add a .pill class to the button

- -
+
+

If you prefer a pill-like button with more rounded corners, you can add a .pill class to the button

Code:

- 
<a href="#" class="pill button">This is a Pill Button</a>
-
+ 
<a href="#" class="button pill">This is a Pill Button</a>

Result:

- This is a Pill Button -
+ This is a Pill Button +
-

Sometimes when you have multiple buttons, it's considered good practice to highlight the button with the primary action in order to give the user a visual clue of what action to take if in doubt. This can be accomplished by adding a .primary class to the button.

-
+
+

Sometimes when you have multiple buttons, it's considered good practice to highlight the button with the primary action in order to give the user a visual clue of what action to take if in doubt. This can be accomplished by adding a .primary class to the button.

Code:

- 
<a href="#" class="primary button">Publish Post</a> or <a href="#" class="button">Save as Draft</a>
-
+ 
<a href="#" class="button primary">Publish Post</a> or <a href="#" class="button">Save as Draft</a>

Result:

- Publish Post or Save as Draft -
+ Publish Post or Save as Draft +

Buttons with dangerous actions

-

If you have a button that triggers a dangerous action, like deleting data, it's good practice to warn the user by styling the button differently than the normal buttons. Give a button the class .danger and the hover-state will change to red.

-
+
+

If you have a button that triggers a dangerous action, like deleting data, it's good practice to warn the user by styling the button differently than the normal buttons. Give a button the class .danger and the hover-state will change to red.

Code:

- 
<a href="#" class="danger button">Divide by Zero</a>
-
+ 
<a href="#" class="button danger">Divide by Zero</a>

Result:

- Divide by Zero -
+ Divide by Zero +

Grouped buttons

-

You can create grouped buttons that are linked together, like seen at Gmail and other places, by using the .left, .middle and .right classes:

-
+
+

You can create grouped buttons that are linked together, as seen at Gmail and other places, by wrapping buttons in an element with a .button-group class:

Code:

-
<a href="#" class="left primary button">Archive</a>
-<a href="#" class="middle button">Report Spam</a>
-<a href="#" class="right danger button">Delete</a>
-
+
<div class="button-group">
+    <a href="#" class="button primary">Dashboard</a>
+    <a href="#" class="button">Inbox</a>
+    <a href="#" class="button">Account</a>
+    <a href="#" class="button">Logout</a>
+</div>

Result:

- ArchiveReport SpamDelete -
- -

You can also add the pill class to grouped buttons if preferred:

+
+ Dashboard + Inbox + Account + Logout +
+ -
+
+

This also works if you use an unordered or ordered list with a .button-group class. Each button sits within a list item:

Code:

-
<a href="#" class="left primary pill button">Archive</a>
-<a href="#" class="middle pill button">Report Spam</a>
-<a href="#" class="right danger pill button">Delete</a>
-
- +
<ul class="button-group">
+    <li><a href="#" class="button primary pill">Dashboard</a></li>
+    <li><a href="#" class="button pill">Inbox</a></li>
+    <li><a href="#" class="button pill">Account</a></li>
+    <li><a href="#" class="button pill">Logout</a></li>
+</ul>
+ +

Result:

+ +
+ +
+

Sets of grouped buttons will sit alongside each other, by default. You can reduce the visual prominence of a group with a .minor-group class:

+

Code:

+
<div class="button-group">
+    <a href="#" class="button primary">Archive</a>
+    <a href="#" class="button">Report Spam</a>
+    <a href="#" class="button">Delete</a>
+</div>
+
+<div class="button-group minor-group">
+    <a href="#" class="button">Move to</a>
+    <a href="#" class="button">Labels</a>
+</div>
+

Result:

- ArchiveReport SpamDelete -
+
+ Archive + Report Spam + Delete +
+ +
+ Move to + Labels +
+

Buttons with icons

-

CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a span tag inside the anchor tag with the class of .icon and any one of the provided icon classes:

- -
+
+

CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a class of .icon and any one of the provided icon classes:

Code:

- 
<a href="#" class="button"><span class="magnifier icon"></span>Search</a>
-
+ 
<a href="#" class="button magnifier icon">Search</a>

Result:

- Search -
- -

Here is a list of all the supported icon classes:

+ Search + -
+
+

Here is a list of all the supported icon classes:

@@ -245,29 +277,25 @@

Result:

Add New User
-
+

Big buttons

-

If you wish to emphasize a specific action you can add the .big class to make a more prominent call-to-action button:

- -
+
+

If you wish to emphasize a specific action you can add the .big class to make a more prominent call-to-action button:

Code:

- 
<a href="#" class="big button">Create Project</a>
-
+ 
<a href="#" class="big button">Create Project</a>

Result:

Create Project -
+

Browser compatibility

CSS3 Buttons works in all major browsers

- -

Note: Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers! (IE 8 and under). -

+

Note: Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers! (IE 8 and under).

@@ -279,11 +307,10 @@

Installation

  • Link to css3buttons.css in the head section of your HTML page (see code example below)
    • -
    +

    Code:

    - 
    <link rel="stylesheet" href="stylesheets/css3buttons.css" media="screen">
-
    -
    + 
    <link rel="stylesheet" href="stylesheets/css3buttons.css" media="screen">
    +

    CSS3 Buttons expects that some kind of CSS reset is in place in your project, otherwise the look might not be, as seen here.

    @@ -356,7 +383,7 @@

    Need Help?

    diff --git a/stylesheets/demo.css b/stylesheets/demo.css index 401c823..1e438fa 100644 --- a/stylesheets/demo.css +++ b/stylesheets/demo.css @@ -22,7 +22,7 @@ a img { border: none; } * Demo page styles -------------------------------------------------------------- */ -body { font: 14px/1.5 sans-serif; color: #444; background-color: #d5e9f6;} +body { font: 14px/1.5 sans-serif; color: #444; background-color: #fff;} h1 { font-size: 37px; margin-bottom: 50px; font-weight:normal; color: #666;} h2 { font-size: 21px; margin-bottom: 20px; font-weight:normal;} h3 { font-size: 16px; margin-bottom: 10px; font-weight:normal;} @@ -36,7 +36,7 @@ ul, ol { padding-left: 30px; margin: 20px 0; } table { border-collapse: separate; border-spacing: 0; vertical-align: middle; margin: 20px auto 20px auto } th { font-weight: bold } -th, td { padding: 5px; text-align: left; font-weight: normal; vertical-align: middle; } +th, td { padding: 5px; text-align: left; vertical-align: middle; } blockquote { margin: 20px 0px 20px 0px } .code, blockquote, code { font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif } @@ -48,7 +48,7 @@ blockquote { margin: 20px 0px 20px 0px } #main { padding: 10px; background-color: #FFFFFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } section { margin-bottom: 20px; padding: 10px; } -section.even { background-color: #EEE; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } -article.example { margin: 20px 0px 20px 0px; padding: 10px 0px 10px 0px; border-top: 1px dotted #CCCCCC; border-bottom: 1px dotted #CCCCCC; } +section.even { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } +div.example { margin: 10px 0px 20px 0px; padding: 10px 0px 10px 0px; border-top: 1px dotted #ccc; } footer { font-size: 11px; color: #666; text-align: center; margin-top: 20px; } footer a { color: #666 } \ No newline at end of file From 7bce1a6bcb422f034cabe9cb38fed69436d270dd Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 1 Mar 2011 19:23:06 +0000 Subject: [PATCH 09/41] Small change to how .button and .minor-group interact. Removed a few redundant styles --- stylesheets/css3buttons.css | 133 +++++++++++------------------------- 1 file changed, 41 insertions(+), 92 deletions(-) diff --git a/stylesheets/css3buttons.css b/stylesheets/css3buttons.css index acd859b..f3ff7df 100644 --- a/stylesheets/css3buttons.css +++ b/stylesheets/css3buttons.css @@ -14,33 +14,18 @@ Licensed under Unlicense border: 1px solid #d4d4d4; text-decoration: none; text-shadow: 1px 1px 0 #fff; - font:12px/normal 'lucida grande', tahoma, verdana, arial, sans-serif; + font:11px/normal sans-serif; color: #333; white-space: nowrap; cursor: pointer; outline: none; - background: -webkit-gradient( - linear, 0 0, 0 100%, - from(#f4f4f4), - to(#ececec) - ); - background: -moz-linear-gradient( - #f4f4f4, - #ececec - ); - background: linear-gradient( - #f4f4f4, - #ececec - ); - background-color: #fff; - + background: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec)); + background: -moz-linear-gradient(#f4f4f4, #ececec); + background: linear-gradient(#f4f4f4, #ececec); + background-color: #ececec; -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - -o-background-clip: padding-box; - background-clip: padding-box; /* IE hacks */ zoom: 1; *display: inline; @@ -51,44 +36,23 @@ Licensed under Unlicense .button:active { border-color: #3072b3; border-bottom-color: #2a65a0; - text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); color: #fff; - background: -webkit-gradient( - linear, 0 0, 0 100%, - from(#599bdc), - to(#3072b3) - ); - background: -moz-linear-gradient( - #599bdc, - #3072b3 - ); - background: linear-gradient( - #599bdc, - #3072b3 - ); + background: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)); + background: -moz-linear-gradient(#599bdc, #3072b3); + background: linear-gradient(#599bdc, #3072b3); background-color: #3072b3; } .button:active, .button.active { - border-color:#2a65a0; - border-bottom-color:#3884CF; + border-color: #2a65a0; + border-bottom-color: #3884CF; color: #fff; - background: -webkit-gradient( - linear, 0 0, 0 100%, - from(#3072b3), - to(#599bdc) - ); - background: -moz-linear-gradient( - #3072b3, - #599bdc - ); - background: linear-gradient( - #3072b3, - #599bdc - ); + background: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc)); + background: -moz-linear-gradient(#3072b3, #599bdc); + background: linear-gradient(#3072b3, #599bdc); background-color: #3072b3; } @@ -98,7 +62,7 @@ Licensed under Unlicense content: ""; position: relative; top: 1px; - display:inline-block; + display: inline-block; width: 14px; height: 12px; margin: 0 0.5em 0 -0.25em; @@ -267,27 +231,18 @@ Licensed under Unlicense /* ............................................................................................................. Danger */ .button.danger { - color:#900; + color: #900; } .button.danger:hover, -.button.danger:focus { +.button.danger:focus, +.button.danger:active { border-color: #b53f3a; - border-bottom-color:#a0302a; + border-bottom-color: #a0302a; color: #fff; - background: -webkit-gradient( - linear, 0 0, 0 100%, - from(#dc5f59), - to(#b33630) - ); - background: -moz-linear-gradient( - #dc5f59, - #b33630 - ); - background: linear-gradient( - #dc5f59, - #b33630 - ); + background: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630)); + background: -moz-linear-gradient(#dc5f59, #b33630); + background: linear-gradient(#dc5f59, #b33630); background-color: #dc5f59; } @@ -295,18 +250,9 @@ Licensed under Unlicense .button.danger.active { border-color: #a0302a; border-bottom-color: #bf4843; - background: -webkit-gradient(linear, 0 0, 0 100%, - from(#b33630), - to(#dc5f59) - ); - background: -moz-linear-gradient( - #b33630, - #dc5f59 - ); - background: linear-gradient( - #b33630, - #dc5f59 - ); + background: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59)); + background: -moz-linear-gradient(#b33630, #dc5f59); + background: linear-gradient(#b33630, #dc5f59); background-color: #b33630; } @@ -320,35 +266,36 @@ Licensed under Unlicense /* ............................................................................................................. Big */ -.button.big { - font-size: 16px; +.button.big { + font-size: 14px; } .button.big.icon:before { top: 0; } + /* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */ /* ............................................................................................................. Standard */ .button-group { - display:inline-block; - list-style:none; - padding:0; - margin:0; + display: inline-block; + list-style: none; + padding: 0; + margin: 0; } .button-group + .button-group { - margin-left:15px; + margin-left: 15px; } .button-group li { - padding:0; - margin:0; + padding: 0; + margin: 0; } .button-group li, .button-group > .button { - float:left; + float: left; } .button-group li > .button, @@ -387,13 +334,15 @@ Licensed under Unlicense /* ............................................................................................................. Minor */ .button-group.minor-group .button { - text-shadow:none; - background-image:none; + text-shadow: none; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff)); + background-image: -moz-linear-gradient(#fff, #fff); + background-image: linear-gradient(#fff, #fff); } .button-group.minor-group .button:hover, .button-group.minor-group .button:focus, .button-group.minor-group .button:active { - text-shadow:none; - background-image:none; + text-shadow: none; + background-image: none; } \ No newline at end of file From 557f303b41c8f10080f09573524b71eb67c3ac09 Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 1 Mar 2011 19:55:04 +0000 Subject: [PATCH 10/41] New button-container. Changed .minor-group so interaction states are distinct from normal buttons, and it works in older browsers --- stylesheets/css3buttons.css | 39 ++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/stylesheets/css3buttons.css b/stylesheets/css3buttons.css index f3ff7df..e361a1e 100644 --- a/stylesheets/css3buttons.css +++ b/stylesheets/css3buttons.css @@ -284,6 +284,9 @@ Licensed under Unlicense margin: 0; } +.button + .button, +.button + .button-group, +.button-group + .button, .button-group + .button-group { margin-left: 15px; } @@ -303,6 +306,13 @@ Licensed under Unlicense margin-left: -1px; } +.button-group > .button:not(:first-child):not(:last-child), +.button-group li:not(:first-child):not(:last-child) > .button { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + .button-group > .button:first-child, .button-group li:first-child > .button { margin-left: 0; @@ -314,13 +324,6 @@ Licensed under Unlicense border-bottom-right-radius: 0; } -.button-group > .button:not(:first-child):not(:last-child), -.button-group li:not(:first-child):not(:last-child) > .button { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} - .button-group > .button:last-child, .button-group li:last-child > .button { -webkit-border-top-left-radius: 0; @@ -334,15 +337,25 @@ Licensed under Unlicense /* ............................................................................................................. Minor */ .button-group.minor-group .button { + border: 1px solid #d4d4d4; text-shadow: none; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff)); - background-image: -moz-linear-gradient(#fff, #fff); - background-image: linear-gradient(#fff, #fff); + background: #fff; } .button-group.minor-group .button:hover, .button-group.minor-group .button:focus, .button-group.minor-group .button:active { - text-shadow: none; - background-image: none; -} \ No newline at end of file + background: #599bdc; +} + +.button-group.minor-group .button:active, +.button-group.minor-group .button.active { + background: #3072b3; +} + +/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */ +/* For mixing buttons and button groups, e.g., in a navigation bar */ + +.button-container .button { + vertical-align:top; +} From b7de52b648c620acb9bb43c93ffb6075efcab702 Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 1 Mar 2011 20:21:38 +0000 Subject: [PATCH 11/41] Added support for input and button elements --- stylesheets/css3buttons.css | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/stylesheets/css3buttons.css b/stylesheets/css3buttons.css index e361a1e..648267e 100644 --- a/stylesheets/css3buttons.css +++ b/stylesheets/css3buttons.css @@ -12,6 +12,7 @@ Licensed under Unlicense display: inline-block; padding: 0.5em 1em; border: 1px solid #d4d4d4; + margin: 0; text-decoration: none; text-shadow: 1px 1px 0 #fff; font:11px/normal sans-serif; @@ -56,6 +57,11 @@ Licensed under Unlicense background-color: #3072b3; } +/* overrides extra padding on button elements in Firefox */ +.button::-moz-focus-inner { + border: none; +} + /* ............................................................................................................. Icons */ .button.icon:before { @@ -292,29 +298,25 @@ Licensed under Unlicense } .button-group li { + float: left; padding: 0; margin: 0; } -.button-group li, -.button-group > .button { +.button-group .button { float: left; -} - -.button-group li > .button, -.button-group > .button { margin-left: -1px; } .button-group > .button:not(:first-child):not(:last-child), -.button-group li:not(:first-child):not(:last-child) > .button { +.button-group li:not(:first-child):not(:last-child) .button { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .button-group > .button:first-child, -.button-group li:first-child > .button { +.button-group li:first-child .button { margin-left: 0; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; From 33d76630163e849ebd8e9f7903f060a2e955dbe8 Mon Sep 17 00:00:00 2001 From: necolas Date: Fri, 4 Mar 2011 17:36:41 +0000 Subject: [PATCH 12/41] Reintroduced background-clip and set gradients to background-image --- stylesheets/css3buttons.css | 40 ++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/stylesheets/css3buttons.css b/stylesheets/css3buttons.css index 648267e..82ba11d 100644 --- a/stylesheets/css3buttons.css +++ b/stylesheets/css3buttons.css @@ -20,10 +20,13 @@ Licensed under Unlicense white-space: nowrap; cursor: pointer; outline: none; - background: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec)); - background: -moz-linear-gradient(#f4f4f4, #ececec); - background: linear-gradient(#f4f4f4, #ececec); background-color: #ececec; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec)); + background-image: -moz-linear-gradient(#f4f4f4, #ececec); + background-image: linear-gradient(#f4f4f4, #ececec); + -webkit-background-clip: padding; + -moz-background-clip: padding; + background-clip: padding-box; -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; @@ -40,10 +43,10 @@ Licensed under Unlicense text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); color: #fff; - background: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)); - background: -moz-linear-gradient(#599bdc, #3072b3); - background: linear-gradient(#599bdc, #3072b3); background-color: #3072b3; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)); + background-image: -moz-linear-gradient(#599bdc, #3072b3); + background-image: linear-gradient(#599bdc, #3072b3); } .button:active, @@ -51,10 +54,10 @@ Licensed under Unlicense border-color: #2a65a0; border-bottom-color: #3884CF; color: #fff; - background: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc)); - background: -moz-linear-gradient(#3072b3, #599bdc); - background: linear-gradient(#3072b3, #599bdc); background-color: #3072b3; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc)); + background-image: -moz-linear-gradient(#3072b3, #599bdc); + background-image: linear-gradient(#3072b3, #599bdc); } /* overrides extra padding on button elements in Firefox */ @@ -246,20 +249,20 @@ Licensed under Unlicense border-color: #b53f3a; border-bottom-color: #a0302a; color: #fff; - background: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630)); - background: -moz-linear-gradient(#dc5f59, #b33630); - background: linear-gradient(#dc5f59, #b33630); background-color: #dc5f59; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630)); + background-image: -moz-linear-gradient(#dc5f59, #b33630); + background-image: linear-gradient(#dc5f59, #b33630); } .button.danger:active, .button.danger.active { border-color: #a0302a; border-bottom-color: #bf4843; - background: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59)); - background: -moz-linear-gradient(#b33630, #dc5f59); - background: linear-gradient(#b33630, #dc5f59); background-color: #b33630; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59)); + background-image: -moz-linear-gradient(#b33630, #dc5f59); + background-image: linear-gradient(#b33630, #dc5f59); } /* ............................................................................................................. Pill */ @@ -341,18 +344,19 @@ Licensed under Unlicense .button-group.minor-group .button { border: 1px solid #d4d4d4; text-shadow: none; - background: #fff; + background-image: none; + background-color: #fff; } .button-group.minor-group .button:hover, .button-group.minor-group .button:focus, .button-group.minor-group .button:active { - background: #599bdc; + background-color: #599bdc; } .button-group.minor-group .button:active, .button-group.minor-group .button.active { - background: #3072b3; + background-color: #3072b3; } /* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */ From d79532ffa5391c036ed4149254b6e5be81e3af9e Mon Sep 17 00:00:00 2001 From: necolas Date: Sun, 13 Mar 2011 17:35:16 +0000 Subject: [PATCH 13/41] Renamed files and directories. Reorganised example page HTML and CSS. Redesigned example page and using prettyPrint for code syntax highlighting. Changed icon classes on the buttons --- .../css3-github-buttons.css | 110 ++--- css/demo.css | 149 +++++++ demo.html | 392 ------------------ ...cons.png => css3-github-buttons-icons.png} | Bin index.html | 321 ++++++++++++++ stylesheets/demo.css | 54 --- 6 files changed, 525 insertions(+), 501 deletions(-) rename stylesheets/css3buttons.css => css/css3-github-buttons.css (79%) create mode 100644 css/demo.css delete mode 100644 demo.html rename images/{css3buttons_icons.png => css3-github-buttons-icons.png} (100%) create mode 100644 index.html delete mode 100644 stylesheets/demo.css diff --git a/stylesheets/css3buttons.css b/css/css3-github-buttons.css similarity index 79% rename from stylesheets/css3buttons.css rename to css/css3-github-buttons.css index 82ba11d..29b5c6f 100644 --- a/stylesheets/css3buttons.css +++ b/css/css3-github-buttons.css @@ -1,5 +1,5 @@ /* ------------------------------------------ -CSS3 BUTTONS (GITHUB STYLE) +CSS3 GITHUB BUTTONS Licensed under Unlicense ------------------------------------------ */ @@ -71,17 +71,37 @@ Licensed under Unlicense content: ""; position: relative; top: 1px; - display: inline-block; + float:left; width: 14px; height: 12px; margin: 0 0.5em 0 -0.25em; - background: url(../images/css3buttons_icons.png) no-repeat; + background: url(../images/css3-github-buttons-icons.png) 0 99px no-repeat; } -.button.book.icon:before { background-position: 0 0; } -.button.book.icon:hover:before, -.button.book.icon:focus:before, -.button.book.icon:active:before { background-position: 0 -15px; } +.button.arrowup.icon:before { background-position: 0 -824px; } +.button.arrowup.icon:hover:before, +.button.arrowup.icon:focus:before, +.button.arrowup.icon:active:before { background-position: 0 -839px; } + +.button.arrowdown.icon:before { background-position: 0 -234px; } +.button.arrowdown.icon:hover:before, +.button.arrowdown.icon:focus:before, +.button.arrowdown.icon:active:before { background-position: 0 -249px; } + +.button.arrowright.icon:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: 0 -674px; } +.button.arrowright.icon:hover:before, +.button.arrowright.icon:focus:before, +.button.arrowright.icon:active:before { background-position: 0 -689px; } + +.button.arrowleft.icon:before { background-position: 0 -382px; } +.button.arrowleft.icon:hover:before, +.button.arrowleft.icon:focus:before, +.button.arrowleft.icon:active:before { background-position: 0 -397px; } + +.button.log.icon:before { background-position: 0 0; } +.button.log.icon:hover:before, +.button.log.icon:focus:before, +.button.log.icon:active:before { background-position: 0 -15px; } .button.calendar.icon:before { background-position: 0 -30px; } .button.calendar.icon:hover:before, @@ -93,45 +113,40 @@ Licensed under Unlicense .button.chat.icon:focus:before, .button.chat.icon:active:before { background-position: 0 -75px; } -.button.check.icon:before { background-position: 0 -90px; } -.button.check.icon:hover:before, -.button.check.icon:focus:before, -.button.check.icon:active:before { background-position: 0 -103px; } +.button.approve.icon:before { background-position: 0 -90px; } +.button.approve.icon:hover:before, +.button.approve.icon:focus:before, +.button.approve.icon:active:before { background-position: 0 -103px; } .button.clock.icon:before { background-position: 0 -116px; } .button.clock.icon:hover:before, .button.clock.icon:focus:before, .button.clock.icon:active:before { background-position: 0 -131px; } -.button.cog.icon:before { background-position: 0 -146px; } -.button.cog.icon:hover:before, -.button.cog.icon:focus:before, -.button.cog.icon:active:before { background-position: 0 -161px; } +.button.settings.icon:before { background-position: 0 -146px; } +.button.settings.icon:hover:before, +.button.settings.icon:focus:before, +.button.settings.icon:active:before { background-position: 0 -161px; } .button.comment.icon:before { background-position: 0 -176px; } .button.comment.icon:hover:before, .button.comment.icon:focus:before, .button.comment.icon:active:before { background-position: 0 -190px; } -.button.cross.icon:before { background-position: 0 -204px; } -.button.cross.icon:hover:before, -.button.cross.icon:focus:before, -.button.cross.icon:active:before { background-position: 0 -219px; } - -.button.downarrow.icon:before { background-position: 0 -234px; } -.button.downarrow.icon:hover:before, -.button.downarrow.icon:focus:before, -.button.downarrow.icon:active:before { background-position: 0 -249px; } +.button.remove.icon:before { background-position: 0 -204px; } +.button.remove.icon:hover:before, +.button.remove.icon:focus:before, +.button.remove.icon:active:before { background-position: 0 -219px; } .button.fork.icon:before { background-position: 0 -264px; } .button.fork.icon:hover:before, .button.fork.icon:focus:before, .button.fork.icon:active:before { background-position: 0 -279px; } -.button.heart.icon:before { background-position: 0 -294px; } -.button.heart.icon:hover:before, -.button.heart.icon:focus:before, -.button.heart.icon:active:before { background-position: 0 -308px; } +.button.like.icon:before { background-position: 0 -294px; } +.button.like.icon:hover:before, +.button.like.icon:focus:before, +.button.like.icon:active:before { background-position: 0 -308px; } .button.home.icon:before { background-position: 0 -322px; } .button.home.icon:hover:before, @@ -143,11 +158,6 @@ Licensed under Unlicense .button.key.icon:focus:before, .button.key.icon:active:before { background-position: 0 -367px; } -.button.leftarrow.icon:before { background-position: 0 -382px; } -.button.leftarrow.icon:hover:before, -.button.leftarrow.icon:focus:before, -.button.leftarrow.icon:active:before { background-position: 0 -397px; } - .button.lock.icon:before { background-position: 0 -412px; } .button.lock.icon:hover:before, .button.lock.icon:focus:before, @@ -158,10 +168,10 @@ Licensed under Unlicense .button.loop.icon:focus:before, .button.loop.icon:active:before { background-position: 0 -457px; } -.button.magnifier.icon:before { background-position: 0 -472px; } -.button.magnifier.icon:hover:before, -.button.magnifier.icon:focus:before, -.button.magnifier.icon:active:before { background-position: 0 -487px; } +.button.search.icon:before { background-position: 0 -472px; } +.button.search.icon:hover:before, +.button.search.icon:focus:before, +.button.search.icon:active:before { background-position: 0 -487px; } .button.mail.icon:before { background-position: 0 -502px; } .button.mail.icon:hover:before, @@ -173,31 +183,26 @@ Licensed under Unlicense .button.move.icon:focus:before, .button.move.icon:active:before { background-position: 0 -541px; } -.button.pen.icon:before { background-position: 0 -556px; } -.button.pen.icon:hover:before, -.button.pen.icon:focus:before, -.button.pen.icon:active:before { background-position: 0 -571px; } +.button.edit.icon:before { background-position: 0 -556px; } +.button.edit.icon:hover:before, +.button.edit.icon:focus:before, +.button.edit.icon:active:before { background-position: 0 -571px; } .button.pin.icon:before { background-position: 0 -586px; } .button.pin.icon:hover:before, .button.pin.icon:focus:before, .button.pin.icon:active:before { background-position: 0 -601px; } -.button.plus.icon:before { background-position: 0 -616px; } -.button.plus.icon:hover:before, -.button.plus.icon:focus:before, -.button.plus.icon:active:before { background-position: 0 -631px; } +.button.add.icon:before { background-position: 0 -616px; } +.button.add.icon:hover:before, +.button.add.icon:focus:before, +.button.add.icon:active:before { background-position: 0 -631px; } .button.reload.icon:before { background-position: 0 -646px; } .button.reload.icon:hover:before, .button.reload.icon:focus:before, .button.reload.icon:active:before { background-position: 0 -660px; } -.button.rightarrow.icon:before { background-position: 0 -674px; } -.button.rightarrow.icon:hover:before, -.button.rightarrow.icon:focus:before, -.button.rightarrow.icon:active:before { background-position: 0 -689px; } - .button.rss.icon:before { background-position: 0 -704px; } .button.rss.icon:hover:before, .button.rss.icon:focus:before, @@ -218,11 +223,6 @@ Licensed under Unlicense .button.unlock.icon:focus:before, .button.unlock.icon:active:before { background-position: 0 -809px; } -.button.uparrow.icon:before { background-position: 0 -824px; } -.button.uparrow.icon:hover:before, -.button.uparrow.icon:focus:before, -.button.uparrow.icon:active:before { background-position: 0 -839px; } - .button.user.icon:before { background-position: 0 -854px; } .button.user.icon:hover:before, .button.user.icon:focus:before, diff --git a/css/demo.css b/css/demo.css new file mode 100644 index 0000000..dfa4331 --- /dev/null +++ b/css/demo.css @@ -0,0 +1,149 @@ +/* ------------------------------------------ +CSS3 GITHUB BUTTONS +Styles for the demo page. Not needed for the buttons. +------------------------------------------ */ + + +/* ------------------------------------------------------------------------------------------------------------- RESET */ + +html, body, div, +code, pre { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} + +/* ------------------------------------------------------------------------------------------------------------- TEMPLATE */ + +body { + font: 14px/1.333 sans-serif; + color: #444; + background: #eee; +} + +a { + color: #980905; +} + +a:hover, +a:focus, +a:active { + text-decoration: none; +} + +h1 { + margin: 0 0 0.5em; + font-size: 36px; +} + +h2 { + margin: 0 0 0.75em; + font-size: 21px; +} + +h3 { + margin: 0 0 0.333em; + font-size: 16px; + font-weight: normal; +} + +p { + margin: 0 0 1.333em; +} + +em { + font-style: italic; +} + +ul, ol { + padding: 0; + margin: 20px 0; +} + +code { + font-family: monospace, serif; +} + +table { + border-collapse: separate; + border-spacing: 0; + margin: 0; + vertical-align: middle; +} + +th { + font-weight: bold; +} + +th, td { + padding: 5px; + text-align: left; + vertical-align: middle; +} + +/* ------------------------------------------------------------------------------------------------------------- TEMPLATE */ + +.container { + position:relative; + width: 600px; + padding: 40px 60px; + border: 1px solid #ccc; + margin: 40px auto 20px; + background: #fff; + -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1); + -moz-box-shadow: 0 0 15px rgba(0,0,0,0.1); + box-shadow: 0 0 15px rgba(0,0,0,0.1); +} + +.container pre, +.container .prettyprint { + padding: 0; + border: 0; + margin: 0 0 20px; + font-size: 13px; + background: #fff; +} + +.ribbon { + position: absolute; + top: -1px; + right: -1px; + opacity: 0.9; +} + +.ribbon:hover, +.ribbon:focus, +.ribbon:active { + opacity: 1; +} + +.ribbon img { + display: block; + border: 0; +} + +.header { + padding-right:80px; +} + +.section { + margin: 40px 0 20px; +} + +.example { + padding: 20px ; + border: 1px solid #ccc; + margin: 10px -20px 20px; +} + +.footer { + margin: 20px 0 50px; + font-size: 11px; + color: #666; + text-align: center; +} + +.footer a { + color: #666; +} \ No newline at end of file diff --git a/demo.html b/demo.html deleted file mode 100644 index ca42eec..0000000 --- a/demo.html +++ /dev/null @@ -1,392 +0,0 @@ - - - - - - CSS3 Buttons | Simple CSS3 framework for creating button links - - - - - - -
    -
    -

    CSS3 Buttons (Github style)

    -
    - -
    -
    -

    What is this?

    -

    CSS3 buttons is a simple framework for creating good-looking GitHub style button links.

    -
    - -
    -

    Buttons

    - -
    -

    To create a button, the only thing you have to do is this:

    -

    Code:

    - 
    <a href="#" class="button">This is a Button</a>
    - -

    Result:

    - This is a Button -
    - -
    -

    If you prefer a pill-like button with more rounded corners, you can add a .pill class to the button

    -

    Code:

    - 
    <a href="#" class="button pill">This is a Pill Button</a>
    - -

    Result:

    - This is a Pill Button -
    - - -
    -

    Sometimes when you have multiple buttons, it's considered good practice to highlight the button with the primary action in order to give the user a visual clue of what action to take if in doubt. This can be accomplished by adding a .primary class to the button.

    -

    Code:

    - 
    <a href="#" class="button primary">Publish Post</a> or <a href="#" class="button">Save as Draft</a>
    - -

    Result:

    - Publish Post or Save as Draft -
    -
    - -
    -

    Buttons with dangerous actions

    - -
    -

    If you have a button that triggers a dangerous action, like deleting data, it's good practice to warn the user by styling the button differently than the normal buttons. Give a button the class .danger and the hover-state will change to red.

    -

    Code:

    - 
    <a href="#" class="button danger">Divide by Zero</a>
    - -

    Result:

    - Divide by Zero -
    -
    - -
    -

    Grouped buttons

    - -
    -

    You can create grouped buttons that are linked together, as seen at Gmail and other places, by wrapping buttons in an element with a .button-group class:

    -

    Code:

    -
    <div class="button-group">
-    <a href="#" class="button primary">Dashboard</a>
-    <a href="#" class="button">Inbox</a>
-    <a href="#" class="button">Account</a>
-    <a href="#" class="button">Logout</a>
-</div>
    - -

    Result:

    -
    - Dashboard - Inbox - Account - Logout -
    -
    - -
    -

    This also works if you use an unordered or ordered list with a .button-group class. Each button sits within a list item:

    -

    Code:

    -
    <ul class="button-group">
-    <li><a href="#" class="button primary pill">Dashboard</a></li>
-    <li><a href="#" class="button pill">Inbox</a></li>
-    <li><a href="#" class="button pill">Account</a></li>
-    <li><a href="#" class="button pill">Logout</a></li>
-</ul>
    - -

    Result:

    - -
    - -
    -

    Sets of grouped buttons will sit alongside each other, by default. You can reduce the visual prominence of a group with a .minor-group class:

    -

    Code:

    -
    <div class="button-group">
-    <a href="#" class="button primary">Archive</a>
-    <a href="#" class="button">Report Spam</a>
-    <a href="#" class="button">Delete</a>
-</div>
-
-<div class="button-group minor-group">
-    <a href="#" class="button">Move to</a>
-    <a href="#" class="button">Labels</a>
-</div>
    - -

    Result:

    -
    - Archive - Report Spam - Delete -
    - -
    - Move to - Labels -
    -
    -
    - -
    -

    Buttons with icons

    - -
    -

    CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a class of .icon and any one of the provided icon classes:

    -

    Code:

    - 
    <a href="#" class="button magnifier icon">Search</a>
    - -

    Result:

    - Search -
    - -
    -

    Here is a list of all the supported icon classes:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ClassExample
    .bookView Log
    .calendarAdd to Calendar
    .chatStart Chat
    .checkApprove Registration
    .clockRegister Work Time
    .cogSettings
    .commentAdd Comment
    .crossRemove Item
    .downarrowMove Down
    .forkCreate Branch
    .heartAdd to Favorites
    .homeBack to Frontpage
    .keyPassword Protect
    .leftarrowMove Left
    .lockLock Article
    .loopResend Message
    .magnifierSearch
    .mailSend Newsletter
    .moveMove
    .penEdit Post
    .pinPin to Map
    .plusAdd Post
    .reloadReload Page
    .rightarrowMove Right
    .rssSubscribe to RSS Feed
    .tagAdd Tag
    .trashDelete Post
    .unlockUnlock Article
    .uparrowMove Up
    .userAdd New User
    -
    -
    - -
    -

    Big buttons

    -
    -

    If you wish to emphasize a specific action you can add the .big class to make a more prominent call-to-action button:

    -

    Code:

    - 
    <a href="#" class="big button">Create Project</a>
    - -

    Result:

    - Create Project -
    -
    - -
    -

    Browser compatibility

    -

    CSS3 Buttons works in all major browsers

    -

    Note: Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers! (IE 8 and under).

    -
    - -
    -

    Installation

    - -
      -
    1. Drop css3buttons.css in your stylesheets folder
      2. -
    2. Drop css3buttons_icons.png in your images folder
      3. -
    3. Link to css3buttons.css in the head section of your HTML page (see code example below)
      4. -
    - -
    -

    Code:

    - 
    <link rel="stylesheet" href="stylesheets/css3buttons.css" media="screen">
    -
    - -

    CSS3 Buttons expects that some kind of CSS reset is in place in your project, otherwise the look might not be, as seen here. -

    -
    - -
    -

    License

    -

    The Unlicense:

    - -
    -

    - This is free and unencumbered software released into the public domain. -

    - -

    - Anyone is free to copy, modify, publish, use, compile, sell, or - distribute this software, either in source code form or as a compiled - binary, for any purpose, commercial or non-commercial, and by any - means. -

    - -

    - In jurisdictions that recognize copyright laws, the author or authors - of this software dedicate any and all copyright interest in the - software to the public domain. We make this dedication for the benefit - of the public at large and to the detriment of our heirs and - successors. We intend this dedication to be an overt act of - relinquishment in perpetuity of all present and future rights to this - software under copyright law. -

    - -

    - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF - MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. - IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR - OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, - ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - OTHER DEALINGS IN THE SOFTWARE. -

    - -

    - For more information, please refer to <http://unlicense.org/> -

    -
    -
    - -
    -

    Shout-Outs

    - - -
    - -
    -

    Contact

    - -

    Found a Bug?

    -

    - Please create a ticket on GitHub With a description of the problem, browser and operating system information and how to reproduce the problem. -

    - -

    Need Help?

    -

    - You can send me a private message on GitHub and I'll do my best to help you. -

    -
    -
    - - -
    - - Fork me on GitHub - - diff --git a/images/css3buttons_icons.png b/images/css3-github-buttons-icons.png similarity index 100% rename from images/css3buttons_icons.png rename to images/css3-github-buttons-icons.png diff --git a/index.html b/index.html new file mode 100644 index 0000000..a3a4a8f --- /dev/null +++ b/index.html @@ -0,0 +1,321 @@ + + + + + CSS3 Github Buttons + + + + + + + + + +
    + Fork me on GitHub + +
    +

    CSS3 Github Buttons

    +

    CSS3 Github Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs.

    +
    + +
    +

    Buttons

    +

    The "buttons" can be created by adding class="button" to any appropriate <a>, <button>, or <input> element. Add a further class of pill to create a button pill-like button. Add a further class of primary to emphasise more important actions.

    + +
    + 
    <a href="#" class="button">Post comment</a>
    +
    + Post comment (link) + + +
    +
    + +
    + 
    <a href="#" class="button pill">This is a pill button</a>
    + This is a pill button +
    + +
    + 
    <a href="#" class="button primary">Publish post</a> 
+<a href="#" class="button">Save as draft</a>
    + Publish post Save as draft +
    +
    + +
    +

    Buttons with dangerous actions

    +

    If you have a button that triggers a dangerous action, like deleting data, this can be indicated by adding the class danger.

    +
    + 
    <a href="#" class="button danger">Delete post</a>
    + Delete post +
    +
    + +
    +

    Big buttons

    +

    If you wish to emphasize a specific action you can add the .big class to make a more prominent call-to-action button:

    + +
    + 
    <a href="#" class="button big">Create Project</a>
    + Create Project +
    +
    + +
    +

    Grouped buttons

    +

    Groups of buttons can be created by wrapping them in an element given a class of button-group. A less important group of buttons can be marked out by adding a further class, minor-group.

    + +
    +
    <div class="button-group">
+    <a href="#" class="button primary">Dashboard</a>
+    <a href="#" class="button">Inbox</a>
+    <a href="#" class="button">Account</a>
+    <a href="#" class="button">Logout</a>
+</div>
    +
    + Dashboard + Inbox + Account + Logout +
    +
    + +
    +
    <ul class="button-group">
+    <li><a href="#" class="button primary pill">Dashboard</a></li>
+    <li><a href="#" class="button pill">Inbox</a></li>
+    <li><a href="#" class="button pill">Account</a></li>
+    <li><a href="#" class="button pill">Logout</a></li>
+</ul>
    + +
    + +
    +
    <div class="button-group minor-group">…</div>
    +
    + Dashboard + Inbox + Account + Logout +
    +
    +
    + +
    +

    Mixed groups

    +

    Displaying a mixture of grouped and standalone buttons, as might be seen in a toolbar, can be done by adding another wrapping element with the class button-container.

    + +
    +
    <div class="actions button-container">
+    <a href="#" class="button primary">Compose new</a>
+    
+    <div class="button-group">
+        <a href="#" class="button primary">Archive</a>
+        <a href="#" class="button">Report spam</a>
+        <a href="#" class="button danger">Delete</a>
+    </div>
+                        
+    <div class="button-group minor-group">
+        <a href="#" class="button">Move to</a>
+        <a href="#" class="button">Labels</a>
+    </div>
+</div>
    +
    + Compose new + +
    + Archive + Report spam + Delete +
    + +
    + Move to + Labels +
    +
    +
    +
    + +
    +

    Buttons with icons

    +

    A range of icons can be added (only for links and buttons) by adding a class of icon and any one of the provided icon classes:

    + +
    + 
    <a href="#" class="button icon search">Search</a>
    + Search +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    ClassExample
    .arrowupMove up
    .arrowdownMove down
    .arrowleftMove left
    .arrowrightMove right
    .logView log
    .calendarAdd to calendar
    .chatStart chat
    .approveApprove registration
    .clockStart timer
    .settingsSettings
    .commentAdd comment
    .removeRemove item
    .forkFork
    .like
    .homeBack to homepage
    .keyPassword protect
    .lockLock
    .loopResend message
    .searchSearch
    .mailSend email
    .moveMove
    .editEdit post
    .pinPin to Map
    .addAdd post
    .reloadReload page
    .rssSubscribe to RSS feed
    .tagAdd tag
    .trashDelete post
    .unlockUnlock
    .userAdd new user
    +
    +
    + + +
    +

    Browser compatibility

    +

    Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+.

    +

    Note: Some CSS3 features are not supported in older versions of Opera and versions of Internet Explorer prior to IE 8. The use of icons is not supported in IE 6 or IE 7.

    +
    + +
    +

    Installation

    +
      +
    1. Add css3buttons.css in your stylesheets folder
      2. +
    2. Add css3buttons_icons.png in your images folder
      3. +
    3. Link to css3buttons.css in the head of your HTML document.
      4. +
    +
    + +
    +

    License

    +

    Public domain: http://unlicense.org/

    +
    + +
    +

    Acknowledgements

    +

    Inspired by Michael Henriksen's CSS3 Buttons. Icons from Iconic pack.

    +
    +
    + +
    + CSS3 Github Buttons by Nicolas Gallagher. +
    + + + \ No newline at end of file diff --git a/stylesheets/demo.css b/stylesheets/demo.css deleted file mode 100644 index 1e438fa..0000000 --- a/stylesheets/demo.css +++ /dev/null @@ -1,54 +0,0 @@ -/** - * This is styling for the demo page and is not necessary to include in your projects - */ - - /* -------------------------------------------------------------- - * Basic reset --------------------------------------------------------------- */ - -html, body, div, -h1, h2, h3, p, span, -code, pre { - margin: 0; - padding: 0; - border: 0; - vertical-align: baseline; -} - -article, aside, figure, footer, header, hgroup, nav, section { display: block; } -a img { border: none; } - - /* -------------------------------------------------------------- - * Demo page styles --------------------------------------------------------------- */ - -body { font: 14px/1.5 sans-serif; color: #444; background-color: #fff;} -h1 { font-size: 37px; margin-bottom: 50px; font-weight:normal; color: #666;} -h2 { font-size: 21px; margin-bottom: 20px; font-weight:normal;} -h3 { font-size: 16px; margin-bottom: 10px; font-weight:normal;} -p { margin-bottom: 20px } - -a { color: #980905 } -a:hover, a:focus, a:active {text-decoration:none;} - -em { font-style: italic } -ul, ol { padding-left: 30px; margin: 20px 0; } - -table { border-collapse: separate; border-spacing: 0; vertical-align: middle; margin: 20px auto 20px auto } -th { font-weight: bold } -th, td { padding: 5px; text-align: left; vertical-align: middle; } -blockquote { margin: 20px 0px 20px 0px } - -.code, blockquote, code { font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif } -.code { color: #d1d1d1; background-color: #3F3F3F; margin: 0px 0px 20px 0px; padding: 5px; font-size: 13px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } -.notice { background-color: #FFF9D8; margin-top: 20px; padding: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } -.ribbon { position: absolute; top: 0; right: 0; border: 0; } - -.container { margin: 50px auto 100px auto; width: 750px; } -#main { padding: 10px; background-color: #FFFFFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } - -section { margin-bottom: 20px; padding: 10px; } -section.even { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } -div.example { margin: 10px 0px 20px 0px; padding: 10px 0px 10px 0px; border-top: 1px dotted #ccc; } -footer { font-size: 11px; color: #666; text-align: center; margin-top: 20px; } -footer a { color: #666 } \ No newline at end of file From f6efcf9293f0d33b29ea847cd32bcd234776ec33 Mon Sep 17 00:00:00 2001 From: necolas Date: Sun, 13 Mar 2011 18:04:40 +0000 Subject: [PATCH 14/41] Changed placeholder hrefs, increased padding on table cells --- css/demo.css | 2 +- index.html | 109 ++++++++++++++++++++++++++------------------------- 2 files changed, 56 insertions(+), 55 deletions(-) diff --git a/css/demo.css b/css/demo.css index dfa4331..739f2de 100644 --- a/css/demo.css +++ b/css/demo.css @@ -77,7 +77,7 @@ th { } th, td { - padding: 5px; + padding: 5px 25px 5px 5px; text-align: left; vertical-align: middle; } diff --git a/index.html b/index.html index a3a4a8f..21a471b 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + @@ -27,7 +28,7 @@

    Buttons

    <a href="#" class="button">Post comment</a>
    - Post comment (link) + Post comment (link)
    @@ -35,13 +36,13 @@

    Buttons

    <a href="#" class="button pill">This is a pill button</a>
    - This is a pill button + This is a pill button 
    <a href="#" class="button primary">Publish post</a> 
 <a href="#" class="button">Save as draft</a>
    - Publish post Save as draft + Publish post Save as draft
    @@ -50,7 +51,7 @@

    Buttons with dangerous actions

    If you have a button that triggers a dangerous action, like deleting data, this can be indicated by adding the class danger.

    <a href="#" class="button danger">Delete post</a>
    - Delete post + Delete post
    @@ -60,7 +61,7 @@

    Big buttons

    <a href="#" class="button big">Create Project</a>
    - Create Project + Create Project
    @@ -76,10 +77,10 @@

    Grouped buttons

    <a href="#" class="button">Logout</a> </div>
    - Dashboard - Inbox - Account - Logout + Dashboard + Inbox + Account + Logout
    @@ -91,20 +92,20 @@

    Grouped buttons

    <li><a href="#" class="button pill">Logout</a></li> </ul> 
    <div class="button-group minor-group">…</div>
    - Dashboard - Inbox - Account - Logout + Dashboard + Inbox + Account + Logout
    @@ -129,17 +130,17 @@

    Mixed groups

    </div> </div>
    - Compose new + Compose new
    - Archive - Report spam - Delete + Archive + Report spam + Delete
    - Move to - Labels + Move to + Labels
    @@ -151,7 +152,7 @@

    Buttons with icons

    <a href="#" class="button icon search">Search</a>
    - Search + Search
    @@ -164,123 +165,123 @@

    Buttons with icons

    .arrowup - Move up + Move up .arrowdown - Move down + Move down .arrowleft - Move left + Move left .arrowright - Move right + Move right .log - View log + View log .calendar - Add to calendar + Add to calendar .chat - Start chat + Start chat .approve - Approve registration + Approve registration .clock - Start timer + Start timer .settings - Settings + Settings .comment - Add comment + Add comment .remove - Remove item + Remove item .fork - Fork + Fork .like - + .home - Back to homepage + Back to homepage .key - Password protect + Password protect .lock - Lock + Lock .loop - Resend message + Resend message .search - Search + Search .mail - Send email + Send email .move - Move + Move .edit - Edit post + Edit post .pin - Pin to Map + Pin to Map .add - Add post + Add post .reload - Reload page + Reload page .rss - Subscribe to RSS feed + Subscribe to RSS feed .tag - Add tag + Add tag .trash - Delete post + Delete post .unlock - Unlock + Unlock .user - Add new user + Add new user
    From 7ad758f1cc41ee921b417c01f876375b6f6a1cbf Mon Sep 17 00:00:00 2001 From: necolas Date: Sun, 13 Mar 2011 18:05:17 +0000 Subject: [PATCH 15/41] Reduced default opacity of icons for minor-group buttons --- css/css3-github-buttons.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/css/css3-github-buttons.css b/css/css3-github-buttons.css index 29b5c6f..0c49a9a 100644 --- a/css/css3-github-buttons.css +++ b/css/css3-github-buttons.css @@ -359,6 +359,16 @@ Licensed under Unlicense background-color: #3072b3; } +.button-group.minor-group .button.icon:before { + opacity: 0.8; +} + +.button-group.minor-group .button.icon:hover:before, +.button-group.minor-group .button.icon:focus:before, +.button-group.minor-group .button.icon:active:before { + opacity: 1; +} + /* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */ /* For mixing buttons and button groups, e.g., in a navigation bar */ From 87e4a1357c9eefb9835a0c7c302c707294b259a7 Mon Sep 17 00:00:00 2001 From: necolas Date: Sun, 13 Mar 2011 18:19:40 +0000 Subject: [PATCH 16/41] Updated README and associated copy in example page --- README.md | 151 ++++++++++++++++++----------------------------------- index.html | 13 +++-- 2 files changed, 56 insertions(+), 108 deletions(-) diff --git a/README.md b/README.md index 32a68f2..2149531 100644 --- a/README.md +++ b/README.md @@ -1,129 +1,78 @@ -# CSS3 Buttons # +# CSS3 Github Buttons # -## What is this? ## - -[CSS3 buttons](http://css3buttons.michaelhenriksen.dk) is a simple *framework* for creating good-looking GitHub style button links. +CSS3 Github Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs. ## Buttons ## -To create a button, the only thing you have to do is this: - - This is a Button - -If you prefer a pill-like button with more rounded corners, you can add a `.pill` class to the button +The "buttons" can be created by adding `class="button"` to any appropriate ``, ` -Sometimes when you have multiple buttons, it's a good thing to highlight the button with the primary action -in order to give the user a visual clue of what action to take if in doubt. This can be accomplished by adding -a `.primary` class to the button +## Buttons with dangerous actions ## - Publish Post or Save as Draft +If you have a button that triggers a dangerous action, like deleting data, this can be indicated by adding the class `danger`. -## Buttons with negative actions ## + Delete post -If you have a button that triggers a negative action, like deleting data, it's good practice to warn the user -by styling the button differently than the normal buttons. Give a button the class `.negative` and the -hover-state will change to red +## Big buttons ## - Divide by Zero +If you wish to emphasize a specific action you can add the class `big`. + Create Project + ## Grouped buttons ## -You can create grouped buttons that are linked together, like seen at Gmail and other places, -by using the `.left`, `.middle` and `.right` classes: - - Archive - Report Spam - Delete - -You can also add the pill class to grouped buttons if preferred: - - Archive - Report Spam - Delete +Groups of buttons can be created by wrapping them in an element given a class of `button-group`. A less important group of buttons can be marked out by adding a further class, `minor-group`. + +
    + Dashboard + Inbox + Account + Logout +
    + +## Mixed groups ## + +Displaying a mixture of grouped and standalone buttons, as might be seen in a toolbar, can be done by adding another wrapping element with the class `button-container`. + +
    + Compose new + +
    + Archive + Report spam + Delete +
    + +
    + Move to + Labels +
    +
    ## Buttons with icons ## -CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a span tag inside the anchor -tag with the class of `.icon` and any one of the provided icon classes: -) - Search - -Here is a list of all the supported icon classes: - - * `.book` - * `.calendar` - * `.chat` - * `.check` - * `.clock` - * `.cog` - * `.comment` - * `.cross` - * `.downarrow` - * `.fork` - * `.heart` - * `.home` - * `.key` - * `.leftarrow` - * `.lock` - * `.loop` - * `.magnifier` - * `.mail` - * `.move` - * `.pen` - * `.pin` - * `.plus` - * `.reload` - * `.rightarrow` - * `.rss` - * `.tag` - * `.trash` - * `.unlock` - * `.uparrow` - * `.user` - -## Big buttons ## - -If you wish to emphasize a specific action you can add the `.big` class to make a more prominent *call-to-action* button: +A range of icons can be added (only for links and buttons) by adding a class of `icon` and any one of the provided icon classes. - Create Project + Search ## Browser compatibility ## -CSS3 Buttons works in all major browsers - -**Note:** Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers! (IE 8 and under) +Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+. +Note: Some CSS3 features are not supported in older versions of Opera and versions of Internet Explorer prior to IE 8. The use of icons is not supported in IE 6 or IE 7. ## Installation ## - 1. Drop `css3buttons.css` in your stylesheets folder - 2. Drop `css3buttons_backgrounds.png` and `css3buttons_icons.png` in your images folder - 3. Link to `css3buttons.css` in the head section of your HTML page + 1. Add `css3-github-buttons.css` in your stylesheets folder + 2. Add `css3-github-buttons-icons.png` in your images folder + 3. Link to `css3-github-buttons.css` in the head of your HTML document ## License ## -### The [Unlicense](http://unlicense.org): ### - -This is free and unencumbered software released into the public domain. - -Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means. - -In jurisdictions that recognize copyright laws, the author or authors of this software dedicate any and all copyright interest in the software to the public domain. We make this dedication for the benefit of the public at large and to the detriment of our heirs and successors. We intend this dedication to be an overt act of relinquishment in perpetuity of all present and future rights to this software under copyright law. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -For more information, please refer to - -## Shout-Outs ## - - * Thanks to [GitHub](http://github.com) and [David Walsh](http://davidwalsh.name/github-css) for inspiration! - * Icons used in CSS3 Buttons are from the excellent [Iconic pack](http://somerandomdude.com/projects/iconic/) by [some random dude](http://somerandomdude.com/)! - -## Contact ## +Public domain: [http://unlicense.org](http://unlicense.org) -### Found a Bug? ### -Please create a [ticket on GitHub](https://github.com/michenriksen/css3buttons/issues) With a description of the problem, browser and operating system information and how to reproduce the problem. +## Acknowledgements ## -### Need Help? ### -You can send me a private message on [GitHub](http://github.com/michenriksen/) and I'll do my best to help you. +Inspired by [Michael Henriksen](http://michaelhenriksen.dk)'s [CSS3 Buttons](http://github.com/michenriksen/css3buttons). Icons from [Iconic pack](http://somerandomdude.com/projects/iconic/). diff --git a/index.html b/index.html index 21a471b..be053e6 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ CSS3 Github Buttons - + @@ -48,7 +48,7 @@

    Buttons

    Buttons with dangerous actions

    -

    If you have a button that triggers a dangerous action, like deleting data, this can be indicated by adding the class danger.

    +

    If you have a button that triggers a dangerous action, like deleting data, this can be indicated by adding the class danger.

    <a href="#" class="button danger">Delete post</a>
    Delete post @@ -57,7 +57,7 @@

    Buttons with dangerous actions

    Big buttons

    -

    If you wish to emphasize a specific action you can add the .big class to make a more prominent call-to-action button:

    +

    If you wish to emphasize a specific action you can add the class big.

    <a href="#" class="button big">Create Project</a>
    @@ -287,7 +287,6 @@

    Buttons with icons

    -

    Browser compatibility

    Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+.

    @@ -297,9 +296,9 @@

    Browser compatibility

    Installation

      -
    1. Add css3buttons.css in your stylesheets folder
      2. -
    2. Add css3buttons_icons.png in your images folder
      3. -
    3. Link to css3buttons.css in the head of your HTML document.
      4. +
    4. Add css3-github-buttons.css in your stylesheets folder
      5. +
    5. Add css3-github-buttons-icons.png in your images folder
      6. +
    6. Link to css3-github-buttons.css in the head of your HTML document.
    From a4b8d2f4d1c3e5da3407b088954a303b77d15eb7 Mon Sep 17 00:00:00 2001 From: necolas Date: Mon, 14 Mar 2011 13:35:14 +0000 Subject: [PATCH 17/41] Removed media attributes from link elements --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index be053e6..35bc06d 100644 --- a/index.html +++ b/index.html @@ -4,17 +4,17 @@ CSS3 Github Buttons - - + + - +
    - Fork me on GitHub + Fork me on GitHub

    CSS3 Github Buttons

    From ab2fe870a2a7d66dbd0fdef7a40aa17611625e21 Mon Sep 17 00:00:00 2001 From: necolas Date: Mon, 14 Mar 2011 13:45:42 +0000 Subject: [PATCH 18/41] Added missing block in first example --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 35bc06d..d873a71 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@

    Buttons

    The "buttons" can be created by adding class="button" to any appropriate <a>, <button>, or <input> element. Add a further class of pill to create a button pill-like button. Add a further class of primary to emphasise more important actions.

    - 
    <a href="#" class="button">Post comment</a>
    + 
    <a href="#" class="button">Post comment</a>
    Post comment (link) From 2f82555d38aa007553887c3d24c02c0e0c0d4ba2 Mon Sep 17 00:00:00 2001 From: necolas Date: Mon, 14 Mar 2011 13:51:51 +0000 Subject: [PATCH 19/41] Included display:inline hack for old IE on button-group --- css/css3-github-buttons.css | 3 +++ css/demo.css | 5 +---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/css/css3-github-buttons.css b/css/css3-github-buttons.css index 0c49a9a..a02a86a 100644 --- a/css/css3-github-buttons.css +++ b/css/css3-github-buttons.css @@ -291,6 +291,9 @@ Licensed under Unlicense list-style: none; padding: 0; margin: 0; + /* IE hacks */ + zoom: 1; + *display: inline; } .button + .button, diff --git a/css/demo.css b/css/demo.css index 739f2de..10d2eeb 100644 --- a/css/demo.css +++ b/css/demo.css @@ -61,10 +61,6 @@ ul, ol { margin: 20px 0; } -code { - font-family: monospace, serif; -} - table { border-collapse: separate; border-spacing: 0; @@ -86,6 +82,7 @@ th, td { .container { position:relative; + overflow:hidden; width: 600px; padding: 40px 60px; border: 1px solid #ccc; From c866c5b738cdc8dbee2772192c79aecb05dd27b5 Mon Sep 17 00:00:00 2001 From: necolas Date: Mon, 14 Mar 2011 13:56:42 +0000 Subject: [PATCH 20/41] Added example link to README --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 2149531..4862d20 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ CSS3 Github Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs. +Example: [nicolasgallagher/lab/css3-github-buttons/](http://nicolasgallagher/lab/css3-github-buttons/) + ## Buttons ## The "buttons" can be created by adding `class="button"` to any appropriate ``, `
    - -
    -

    Installation

    -
      -
    1. Add css3-github-buttons.css in your stylesheets folder
      2. -
    2. Add css3-github-buttons-icons.png in your images folder
      3. -
    3. Link to css3-github-buttons.css in the head of your HTML document.
      4. -
    -

    License

    From bbd5dc8067fccbc90289c3de057583bb3a9ffc08 Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 3 May 2011 18:32:14 +0100 Subject: [PATCH 32/41] Correct active state appearance. Fix #5 --- gh-buttons.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/gh-buttons.css b/gh-buttons.css index e9bc34c..fc24077 100644 --- a/gh-buttons.css +++ b/gh-buttons.css @@ -40,13 +40,14 @@ http://github.com/necolas/css3-github-buttons .button:hover, .button:focus, -.button:active { +.button:active, +.button.active { border-color: #3072b3; border-bottom-color: #2a65a0; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); color: #fff; - background-color: #3072b3; + background-color: #3C8DDE; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)); background-image: -moz-linear-gradient(#599bdc, #3072b3); background-image: -o-linear-gradient(#599bdc, #3072b3); @@ -57,7 +58,6 @@ http://github.com/necolas/css3-github-buttons .button.active { border-color: #2a65a0; border-bottom-color: #3884CF; - color: #fff; background-color: #3072b3; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc)); background-image: -moz-linear-gradient(#3072b3, #599bdc); From 1a1decc603db99c30edb69e01f56e5ace6bea18e Mon Sep 17 00:00:00 2001 From: necolas Date: Tue, 3 May 2011 18:40:00 +0100 Subject: [PATCH 33/41] Add GitHub-style disable class. Fix #4 --- gh-buttons.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/gh-buttons.css b/gh-buttons.css index fc24077..dff19f3 100644 --- a/gh-buttons.css +++ b/gh-buttons.css @@ -286,6 +286,12 @@ http://github.com/necolas/css3-github-buttons border-radius: 50em; } +/* ............................................................................................................. Disable */ + +.button.disable { + opacity: 0.5; +} + /* ............................................................................................................. Big */ .button.big { From dcb347244ef86dcc61feb665d2b42bf64d24f74b Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 18 Aug 2011 23:31:27 +0200 Subject: [PATCH 34/41] Remove duplicate selector. Fix #8 --- gh-buttons.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/gh-buttons.css b/gh-buttons.css index dff19f3..70c1d97 100644 --- a/gh-buttons.css +++ b/gh-buttons.css @@ -371,8 +371,7 @@ http://github.com/necolas/css3-github-buttons } .button-group.minor-group .button:hover, -.button-group.minor-group .button:focus, -.button-group.minor-group .button:active { +.button-group.minor-group .button:focus { background-color: #599bdc; } From 4acd3d89b9f80e1dcf27d2f2250dcbb71beaf00e Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 14 Apr 2012 11:51:41 +0100 Subject: [PATCH 35/41] Whitespace cleanup --- gh-buttons.css | 122 +++++++++++++++++++++++++------------------------ 1 file changed, 62 insertions(+), 60 deletions(-) diff --git a/gh-buttons.css b/gh-buttons.css index 70c1d97..d7c44ab 100644 --- a/gh-buttons.css +++ b/gh-buttons.css @@ -1,26 +1,26 @@ /* ------------------------------------------ CSS3 GITHUB BUTTONS (Nicolas Gallagher) -Licensed under Unlicense +Licensed under Unlicense http://github.com/necolas/css3-github-buttons ------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------- BUTTON */ -.button { - position: relative; - overflow: visible; - display: inline-block; - padding: 0.5em 1em; - border: 1px solid #d4d4d4; +.button { + position: relative; + overflow: visible; + display: inline-block; + padding: 0.5em 1em; + border: 1px solid #d4d4d4; margin: 0; - text-decoration: none; - text-shadow: 1px 1px 0 #fff; - font:11px/normal sans-serif; - color: #333; - white-space: nowrap; - cursor: pointer; - outline: none; + text-decoration: none; + text-shadow: 1px 1px 0 #fff; + font:11px/normal sans-serif; + color: #333; + white-space: nowrap; + cursor: pointer; + outline: none; background-color: #ececec; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec)); background-image: -moz-linear-gradient(#f4f4f4, #ececec); @@ -28,14 +28,14 @@ http://github.com/necolas/css3-github-buttons background-image: linear-gradient(#f4f4f4, #ececec); -webkit-background-clip: padding; -moz-background-clip: padding; - -o-background-clip: padding-box; + -o-background-clip: padding-box; /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */ - -webkit-border-radius: 0.2em; - -moz-border-radius: 0.2em; - border-radius: 0.2em; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; /* IE hacks */ - zoom: 1; - *display: inline; + zoom: 1; + *display: inline; } .button:hover, @@ -44,9 +44,9 @@ http://github.com/necolas/css3-github-buttons .button.active { border-color: #3072b3; border-bottom-color: #2a65a0; - text-decoration: none; - text-shadow: -1px -1px 0 rgba(0,0,0,0.3); - color: #fff; + text-decoration: none; + text-shadow: -1px -1px 0 rgba(0,0,0,0.3); + color: #fff; background-color: #3C8DDE; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)); background-image: -moz-linear-gradient(#599bdc, #3072b3); @@ -75,12 +75,12 @@ http://github.com/necolas/css3-github-buttons .button.icon:before { content: ""; - position: relative; - top: 1px; + position: relative; + top: 1px; float:left; - width: 12px; - height: 12px; - margin: 0 0.75em 0 -0.25em; + width: 12px; + height: 12px; + margin: 0 0.75em 0 -0.25em; background: url(gh-icons.png) 0 99px no-repeat; } @@ -256,10 +256,10 @@ http://github.com/necolas/css3-github-buttons .button.danger:hover, .button.danger:focus, -.button.danger:active { +.button.danger:active { border-color: #b53f3a; border-bottom-color: #a0302a; - color: #fff; + color: #fff; background-color: #dc5f59; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630)); background-image: -moz-linear-gradient(#dc5f59, #b33630); @@ -268,7 +268,7 @@ http://github.com/necolas/css3-github-buttons } .button.danger:active, -.button.danger.active { +.button.danger.active { border-color: #a0302a; border-bottom-color: #bf4843; background-color: #b33630; @@ -281,9 +281,9 @@ http://github.com/necolas/css3-github-buttons /* ............................................................................................................. Pill */ .button.pill { - -webkit-border-radius: 50em; - -moz-border-radius: 50em; - border-radius: 50em; + -webkit-border-radius: 50em; + -moz-border-radius: 50em; + border-radius: 50em; } /* ............................................................................................................. Disable */ @@ -295,10 +295,12 @@ http://github.com/necolas/css3-github-buttons /* ............................................................................................................. Big */ .button.big { - font-size: 14px; + font-size: 14px; } -.button.big.icon:before { top: 0; } +.button.big.icon:before { + top: 0; +} /* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */ @@ -311,8 +313,8 @@ http://github.com/necolas/css3-github-buttons padding: 0; margin: 0; /* IE hacks */ - zoom: 1; - *display: inline; + zoom: 1; + *display: inline; } .button + .button, @@ -330,41 +332,41 @@ http://github.com/necolas/css3-github-buttons .button-group .button { float: left; - margin-left: -1px; + margin-left: -1px; } .button-group > .button:not(:first-child):not(:last-child), -.button-group li:not(:first-child):not(:last-child) .button { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; +.button-group li:not(:first-child):not(:last-child) .button { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } .button-group > .button:first-child, -.button-group li:first-child .button { - margin-left: 0; - -webkit-border-top-right-radius: 0; - -webkit-border-bottom-right-radius: 0; - -moz-border-radius-topright: 0; - -moz-border-radius-bottomright: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; +.button-group li:first-child .button { + margin-left: 0; + -webkit-border-top-right-radius: 0; + -webkit-border-bottom-right-radius: 0; + -moz-border-radius-topright: 0; + -moz-border-radius-bottomright: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } .button-group > .button:last-child, -.button-group li:last-child > .button { - -webkit-border-top-left-radius: 0; - -webkit-border-bottom-left-radius: 0; - -moz-border-radius-topleft: 0; - -moz-border-radius-bottomleft: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; +.button-group li:last-child > .button { + -webkit-border-top-left-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-radius-topleft: 0; + -moz-border-radius-bottomleft: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } /* ............................................................................................................. Minor */ .button-group.minor-group .button { - border: 1px solid #d4d4d4; + border: 1px solid #d4d4d4; text-shadow: none; background-image: none; background-color: #fff; @@ -390,4 +392,4 @@ http://github.com/necolas/css3-github-buttons .button-container .button, .button-container .button-group { vertical-align: top; -} \ No newline at end of file +} From eac8a20371e0c64cf4d7c5658d1570dc94bd34a8 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 14 Apr 2012 11:57:18 +0100 Subject: [PATCH 36/41] Vendor prefix updates Remove vendor prefixed `border-radius` as it is widely supported without prefix by contemporary browsers. Remove any prefixed versions of `background-clip` that are no longer needed. Add `-ms-` prefixed linear gradients. --- gh-buttons.css | 24 ++++++------------------ 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/gh-buttons.css b/gh-buttons.css index d7c44ab..cf23d70 100644 --- a/gh-buttons.css +++ b/gh-buttons.css @@ -24,14 +24,11 @@ http://github.com/necolas/css3-github-buttons background-color: #ececec; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec)); background-image: -moz-linear-gradient(#f4f4f4, #ececec); + background-image: -ms-linear-gradient(#f4f4f4, #ececec); background-image: -o-linear-gradient(#f4f4f4, #ececec); background-image: linear-gradient(#f4f4f4, #ececec); - -webkit-background-clip: padding; - -moz-background-clip: padding; - -o-background-clip: padding-box; - /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */ - -webkit-border-radius: 0.2em; - -moz-border-radius: 0.2em; + -moz-background-clip: padding; /* for Firefox 3.6 */ + background-clip: padding-box; border-radius: 0.2em; /* IE hacks */ zoom: 1; @@ -61,6 +58,7 @@ http://github.com/necolas/css3-github-buttons background-color: #3072b3; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc)); background-image: -moz-linear-gradient(#3072b3, #599bdc); + background-image: -ms-linear-gradient(#3072b3, #599bdc); background-image: -o-linear-gradient(#3072b3, #599bdc); background-image: linear-gradient(#3072b3, #599bdc); } @@ -263,6 +261,7 @@ http://github.com/necolas/css3-github-buttons background-color: #dc5f59; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630)); background-image: -moz-linear-gradient(#dc5f59, #b33630); + background-image: -ms-linear-gradient(#dc5f59, #b33630); background-image: -o-linear-gradient(#dc5f59, #b33630); background-image: linear-gradient(#dc5f59, #b33630); } @@ -274,6 +273,7 @@ http://github.com/necolas/css3-github-buttons background-color: #b33630; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59)); background-image: -moz-linear-gradient(#b33630, #dc5f59); + background-image: -ms-linear-gradient(#b33630, #dc5f59); background-image: -o-linear-gradient(#b33630, #dc5f59); background-image: linear-gradient(#b33630, #dc5f59); } @@ -281,8 +281,6 @@ http://github.com/necolas/css3-github-buttons /* ............................................................................................................. Pill */ .button.pill { - -webkit-border-radius: 50em; - -moz-border-radius: 50em; border-radius: 50em; } @@ -337,28 +335,18 @@ http://github.com/necolas/css3-github-buttons .button-group > .button:not(:first-child):not(:last-child), .button-group li:not(:first-child):not(:last-child) .button { - -webkit-border-radius: 0; - -moz-border-radius: 0; border-radius: 0; } .button-group > .button:first-child, .button-group li:first-child .button { margin-left: 0; - -webkit-border-top-right-radius: 0; - -webkit-border-bottom-right-radius: 0; - -moz-border-radius-topright: 0; - -moz-border-radius-bottomright: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .button-group > .button:last-child, .button-group li:last-child > .button { - -webkit-border-top-left-radius: 0; - -webkit-border-bottom-left-radius: 0; - -moz-border-radius-topleft: 0; - -moz-border-radius-bottomleft: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } From 9516e82d8fe57aed64f3c5d1e6fe35bc404d4cd6 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 14 Apr 2012 12:00:39 +0100 Subject: [PATCH 37/41] Standardise capitalization of hex value's letters --- gh-buttons.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gh-buttons.css b/gh-buttons.css index cf23d70..8df5056 100644 --- a/gh-buttons.css +++ b/gh-buttons.css @@ -44,7 +44,7 @@ http://github.com/necolas/css3-github-buttons text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); color: #fff; - background-color: #3C8DDE; + background-color: #3c8dde; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)); background-image: -moz-linear-gradient(#599bdc, #3072b3); background-image: -o-linear-gradient(#599bdc, #3072b3); @@ -54,7 +54,7 @@ http://github.com/necolas/css3-github-buttons .button:active, .button.active { border-color: #2a65a0; - border-bottom-color: #3884CF; + border-bottom-color: #3884cd; background-color: #3072b3; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc)); background-image: -moz-linear-gradient(#3072b3, #599bdc); From d9322762c1bc5c5928e84c3f727dceb66f4379a2 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 14 Apr 2012 12:06:50 +0100 Subject: [PATCH 38/41] Update CSS comments --- gh-buttons.css | 52 +++++++++++++++++++++++++++++++++----------------- 1 file changed, 35 insertions(+), 17 deletions(-) diff --git a/gh-buttons.css b/gh-buttons.css index 8df5056..7ff01f2 100644 --- a/gh-buttons.css +++ b/gh-buttons.css @@ -1,11 +1,13 @@ /* ------------------------------------------ -CSS3 GITHUB BUTTONS (Nicolas Gallagher) -Licensed under Unlicense -http://github.com/necolas/css3-github-buttons ------------------------------------------- */ + * CSS3 GITHUB BUTTONS (Nicolas Gallagher) + * Licensed under Unlicense + * http://github.com/necolas/css3-github-buttons + * --------------------------------------- */ -/* ------------------------------------------------------------------------------------------------------------- BUTTON */ +/* ============================================================================= + Base Button + ========================================================================== */ .button { position: relative; @@ -69,7 +71,10 @@ http://github.com/necolas/css3-github-buttons border: 0; } -/* ............................................................................................................. Icons */ + +/* ============================================================================= + Button icons + ========================================================================== */ .button.icon:before { content: ""; @@ -238,15 +243,19 @@ http://github.com/necolas/css3-github-buttons .button.user.icon:active:before { background-position: -12px -360px; } -/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */ +/* ============================================================================= + Button extensions + ========================================================================== */ -/* ............................................................................................................. Primary */ +/* Primary button + ========================================================================== */ .button.primary { font-weight: bold; } -/* ............................................................................................................. Danger */ +/* Danger button + ========================================================================== */ .button.danger { color: #900; @@ -278,19 +287,22 @@ http://github.com/necolas/css3-github-buttons background-image: linear-gradient(#b33630, #dc5f59); } -/* ............................................................................................................. Pill */ +/* Pill button + ========================================================================== */ .button.pill { border-radius: 50em; } -/* ............................................................................................................. Disable */ +/* Disabled button + ========================================================================== */ .button.disable { opacity: 0.5; } -/* ............................................................................................................. Big */ +/* Big button + ========================================================================== */ .button.big { font-size: 14px; @@ -301,9 +313,12 @@ http://github.com/necolas/css3-github-buttons } -/* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */ +/* ============================================================================= + Button groups + ========================================================================== */ -/* ............................................................................................................. Standard */ +/* Standard group + ========================================================================== */ .button-group { display: inline-block; @@ -351,7 +366,8 @@ http://github.com/necolas/css3-github-buttons border-bottom-left-radius: 0; } -/* ............................................................................................................. Minor */ +/* Minor group + ========================================================================== */ .button-group.minor-group .button { border: 1px solid #d4d4d4; @@ -374,10 +390,12 @@ http://github.com/necolas/css3-github-buttons opacity: 0.8; } -/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */ -/* For mixing buttons and button groups, e.g., in a navigation bar */ +/* ============================================================================= + Button container (mixing buttons and groups, e.g., nav bar) + ========================================================================== */ .button-container .button, .button-container .button-group { vertical-align: top; } + From 8930989334fac659b8d5c35fd2a028d6492f4fe3 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 14 Apr 2012 12:07:48 +0100 Subject: [PATCH 39/41] Add `text-align:center` to default button. Fix #15 --- gh-buttons.css | 1 + 1 file changed, 1 insertion(+) diff --git a/gh-buttons.css b/gh-buttons.css index 7ff01f2..c22a830 100644 --- a/gh-buttons.css +++ b/gh-buttons.css @@ -17,6 +17,7 @@ border: 1px solid #d4d4d4; margin: 0; text-decoration: none; + text-align: center; text-shadow: 1px 1px 0 #fff; font:11px/normal sans-serif; color: #333; From 02c8017783e19fd592ffcfb1a9b8cd1f66e384f8 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 31 Dec 2013 16:27:43 -0800 Subject: [PATCH 40/41] Fix link in README --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index b737297..5b9f35e 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ CSS3 GitHub Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs. -Example: [nicolasgallagher.com/lab/css3-github-buttons/](http://nicolasgallagher.com/lab/css3-github-buttons/) +Example: [necolas.github.io/css3-github-buttons/](http://necolas.github.io/css3-github-buttons/) ## Buttons ## @@ -23,11 +23,11 @@ If you have a button that triggers a dangerous action, like deleting data, this If you wish to emphasize a specific action you can add the class `big`. Create Project - + ## Grouped buttons ## Groups of buttons can be created by wrapping them in an element given a class of `button-group`. A less important group of buttons can be marked out by adding a further class, `minor-group`. - +
    Dashboard Inbox @@ -41,13 +41,13 @@ Displaying a mixture of grouped and standalone buttons, as might be seen in a to
    Compose new - +
    Archive Report spam Delete
    - +
    Move to Labels @@ -72,4 +72,4 @@ Public domain: [http://unlicense.org](http://unlicense.org) ## Acknowledgements ## -Inspired by [Michael Henriksen](http://michaelhenriksen.dk)'s [CSS3 Buttons](http://github.com/michenriksen/css3buttons). Icons from [Iconic pack](http://somerandomdude.com/projects/iconic/). \ No newline at end of file +Inspired by [Michael Henriksen](http://michaelhenriksen.dk)'s [CSS3 Buttons](http://github.com/michenriksen/css3buttons). Icons from [Iconic pack](http://somerandomdude.com/projects/iconic/). From 9b3e3828e793f98d727b0bed4c88afc1b4ffd088 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 26 Dec 2015 21:35:59 +0000 Subject: [PATCH 41/41] README: unmaintained --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 5b9f35e..15730a9 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # CSS3 GitHub Buttons # +![unmaintained](http://img.shields.io/badge/status-unmaintained-red.png) + CSS3 GitHub Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs. Example: [necolas.github.io/css3-github-buttons/](http://necolas.github.io/css3-github-buttons/)