body { padding: 15px; } h2 { font: bold 1.25em/1.5 Arial; margin:1em 0 } .button { font: bold 15px/1 Arial; background-image: -webkit-linear-gradient(rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.1)); background-image: -moz-linear-gradient(rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.1)); background-image: -ms-linear-gradient(rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.1)); background-image: -o-linear-gradient(rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.1)); background-image: linear-gradient(rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.1)); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 -1px 1px rgba(0,0,0,0.4); border-radius: 8px; padding: 10px 15px; text-align: center; display: table-cell; } .button:hover { background-image: -webkit-linear-gradient(rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.4) 70%,rgba(0,0,0,0.2)); background-image: -moz-linear-gradient(rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.4) 70%,rgba(0,0,0,0.2)); background-image: -ms-linear-gradient(rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.4) 70%,rgba(0,0,0,0.2)); background-image: -o-linear-gradient(rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.4) 70%,rgba(0,0,0,0.2)); background-image: linear-gradient(rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.4) 70%,rgba(0,0,0,0.2)); } /* colours */ .button { background-color: #58b; } .button.delete { background-color: #c33; } .button.confirm { background-color: #3c3; } /* ====================== sets ====================== */ .buttons { display: table; border-spacing: 15px 1px; margin:0 -15px; } /* ====================== full ====================== */ .buttons.full .button { width: 10000px; } /* ===================== groups ===================== */ .buttons.grouped { border-spacing: 0 1px; margin:0 } .buttons.grouped .button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .buttons.grouped .button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }