.button-group { vertical-align: top; display: inline-block; list-style: none; padding: 0; margin: 0; /* IE hacks */ zoom: 1; *display: inline; } .button-group li { float: left; padding: 0; margin: 0; } .button-group .button { float: left; margin-left: -1px; } .button-group > .button:not(:first-child):not(:last-child), .button-group li:not(:first-child):not(:last-child) .button { border-radius: 0; } .button-group > .button:first-child, .button-group li:first-child .button { margin-left: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .button-group > .button:last-child, .button-group li:last-child > .button { border-top-left-radius: 0; border-bottom-left-radius: 0; } .button { position: relative; overflow: visible; display: inline-block; padding: 0.5em 1em; 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; 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: -ms-linear-gradient(#f4f4f4, #ececec); background-image: -o-linear-gradient(#f4f4f4, #ececec); background-image: linear-gradient(#f4f4f4, #ececec); -moz-background-clip: padding; /* for Firefox 3.6 */ background-clip: padding-box; border-radius: 0.2em; /* IE hacks */ zoom: 1; *display: inline; } .button:hover, .button:focus, .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: #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); background-image: linear-gradient(#599bdc, #3072b3); } .button:active, .button.active { border-color: #2a65a0; 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); background-image: -ms-linear-gradient(#3072b3, #599bdc); background-image: -o-linear-gradient(#3072b3, #599bdc); background-image: linear-gradient(#3072b3, #599bdc); } /* overrides extra padding on button elements in Firefox */ .button::-moz-focus-inner { padding: 0; border: 0; }