/* ---------------------------------------------------------------------------- WordPress-style Buttons TABLE OF CONTENTS: ------------------ 1.0 - Button Layouts 2.0 - Default Button Style 3.0 - Primary Button Style ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- 1.0 - Button Layouts ---------------------------------------------------------------------------- */ .submit input, .button, input.button, .button-primary, input.button-primary, .button-secondary, input.button-secondary { display: inline-block; text-decoration: none; font-size: 12px; line-height: 17px; height: 15px; margin: 0; padding: 0.25em 0.85em 0.35em; cursor: pointer; border-width: 1px; border-style: solid; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; white-space: nowrap; } .button.button-large { padding: 0.4em 1.0em 0.5em; } .button.button-small { padding: 0.15em 0.75em 0.17em; } a.button:active { outline: none; } /* ---------------------------------------------------------------------------- 2.0 - Default Button Style ---------------------------------------------------------------------------- */ .button, .button-secondary, .submit input, input[type=button], input[type=submit] { background: #f3f3f3; background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4)); background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4); background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4); background-image: -o-linear-gradient(top, #fefefe, #f4f4f4); background-image: linear-gradient(to bottom, #fefefe, #f4f4f4); border-color: #bbb; color: #333; text-shadow: 0 1px 0 #fff; } .button.hover, .button:hover, .button-secondary.hover, .button-secondary:hover, .submit input:hover, input[type=button]:hover, input[type=submit]:hover, .button.focus, .button:focus, .button-secondary.focus, .button-secondary:focus, .submit input.focus, .submit input:focus, input[type=button].focus, input[type=button]:focus, input[type=submit]:focus { background: #f3f3f3; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3)); background-image: -webkit-linear-gradient(top, #fff, #f3f3f3); background-image: -moz-linear-gradient(top, #fff, #f3f3f3); background-image: -o-linear-gradient(top, #fff, #f3f3f3); background-image: linear-gradient(to bottom, #fff, #f3f3f3); border-color: #999; color: #222; } .button.focus, .button:focus, .button-secondary.focus, .button-secondary:focus, .submit input.focus, .submit input:focus, input[type=button].focus, input[type=button]:focus, input[type=submit]:focus { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .button.active, .button:active, .button-secondary.active, .button-secondary:active, .submit input:active, input[type=button].active, input[type=button]:active, input[type=submit]:active { background: #eee; background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#fefefe)); background-image: -webkit-linear-gradient(top, #f4f4f4, #fefefe); background-image: -moz-linear-gradient(top, #f4f4f4, #fefefe); background-image: -o-linear-gradient(top, #f4f4f4, #fefefe); background-image: linear-gradient(to bottom, #f4f4f4, #fefefe); border-color: #999; color: #333; text-shadow: 0 -1px 0 #fff; -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); } .button-disabled, .button[disabled], .button:disabled, .button-secondary[disabled], .button-secondary:disabled, a.button.disabled { color: #aaa !important; border-color: #ddd !important; background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f4f4f4)) !important; background-image: -webkit-linear-gradient(top, #f9f9f9, #f4f4f4) !important; background-image: -moz-linear-gradient(top, #f9f9f9, #f4f4f4) !important; background-image: -o-linear-gradient(top, #f9f9f9, #f4f4f4) !important; background-image: linear-gradient(to bottom, #f9f9f9, #f4f4f4) !important; -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: 0 1px 0 #fff !important; } /* ---------------------------------------------------------------------------- 3.0 - Primary Button Style ---------------------------------------------------------------------------- */ input.button-primary, input[type=submit].button-primary, input[type=button].button-primary, button.button-primary, a.button-primary { background-color: #21759b; background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b)); background-image: -webkit-linear-gradient(top, #2a95c5, #21759b); background-image: -moz-linear-gradient(top, #2a95c5, #21759b); background-image: -o-linear-gradient(top, #2a95c5, #21759b); background-image: linear-gradient(to bottom, #2a95c5, #21759b); border-color: #21759b; border-bottom-color: #1e6a8d; -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); color: #fff; text-decoration: none; text-shadow: 0 1px 0 rgba(0,0,0,0.1); } input.button-primary.hover, input.button-primary:hover, input[type=submit].button-primary:hover, input[type=button].button-primary:hover, button.button-primary:hover, a.button-primary:hover, input.button-primary.focus, input.button-primary:focus, input[type=submit].button-primary:focus, input[type=button].button-primary:focus, button.button-primary:focus, a.button-primary:focus { background-color: #278ab7; background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b)); background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b); background-image: -moz-linear-gradient(top, #2e9fd2, #21759b); background-image: -ms-linear-gradient(top, #2e9fd2, #21759b); background-image: -o-linear-gradient(top, #2e9fd2, #21759b); background-image: linear-gradient(to bottom, #2e9fd2, #21759b); border-color: #1b607f; -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); } input.button-primary.focus, input.button-primary:focus, input[type=submit].button-primary:focus, input[type=button].button-primary:focus, button.button-primary:focus, a.button-primary:focus { border-color: #0e3950; -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 0 1px 2px rgba(0,0,0,0.1); } input.button-primary.active, input[type=submit].button-primary:active, input[type=button].button-primary:active, input.button-primary:active, button.button-primary:active, a.button-primary:active { background: #1b607f; background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7)); background-image: -webkit-linear-gradient(top, #21759b, #278ab7); background-image: -moz-linear-gradient(top, #21759b, #278ab7); background-image: -ms-linear-gradient(top, #21759b, #278ab7); background-image: -o-linear-gradient(top, #21759b, #278ab7); background-image: linear-gradient(to bottom, #21759b, #278ab7); border-color: #124560 #2382ae #2382ae #2382ae; color: rgba(255,255,255,0.95); -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); text-shadow: 0 1px 0 rgba(0,0,0,0.1); } .button-primary-disabled, .button-primary[disabled], .button-primary:disabled { color: #94cde7 !important; background: #298cba !important; border-color: #1b607f !important; -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important; } .button-primary-disabled:hover, .button-primary[disabled]:hover { text-shadow: none; }