Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

CSS reformat to make editing easier. Minor simplification of some pro…

…perty values. Addition of :focus and :active styles to improve accessibility and provide feedback to keyboard users.
  • Loading branch information...
commit 1f9d834cf5bc118d9cc29dd1b494c3cd3164dabe 1 parent 019dae3
@necolas necolas authored
Showing with 286 additions and 75 deletions.
  1. +286 −75 stylesheets/css3buttons.css
View
361 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; }
Please sign in to comment.
Something went wrong with that request. Please try again.