1 /* ----------------------------------------------------------------------------
3 NOTE: If you edit this file, you should make sure that the CSS rules for
4 buttons in the following files are updated.
9 WordPress-style Buttons
10 =======================
11 Create a button by adding the `.button` class to an element. For backwards
12 compatibility, we support several other classes (such as `.button-secondary`),
13 but these will *not* work with the stackable classes described below.
17 To display a primary button style, add the `.button-primary` class to a button.
21 Adjust a button's size by adding the `.button-large` or `.button-small` class.
25 Lock the state of a button by adding the name of the pseudoclass as
26 an actual class (e.g. `.hover` for `:hover`).
32 2.0 - Default Button Style
33 3.0 - Primary Button Style
35 5.0 - Responsive Button Styles
37 ---------------------------------------------------------------------------- */
39 /* ----------------------------------------------------------------------------
41 ---------------------------------------------------------------------------- */
44 .wp-core-ui .button-primary,
45 .wp-core-ui .button-secondary {
46 display: inline-block;
47 text-decoration: none;
56 -webkit-appearance: none;
57 -webkit-border-radius: 3px;
60 -webkit-box-sizing: border-box;
61 -moz-box-sizing: border-box;
62 box-sizing: border-box;
65 /* Remove the dotted border on :focus and the extra padding in Firefox */
66 .wp-core-ui button::-moz-focus-inner,
67 .wp-core-ui input[type="reset"]::-moz-focus-inner,
68 .wp-core-ui input[type="button"]::-moz-focus-inner,
69 .wp-core-ui input[type="submit"]::-moz-focus-inner {
75 .wp-core-ui .button.button-large,
76 .wp-core-ui .button-group.button-large .button {
82 .wp-core-ui .button.button-small,
83 .wp-core-ui .button-group.button-small .button {
90 .wp-core-ui .button.button-hero,
91 .wp-core-ui .button-group.button-hero .button {
98 .wp-core-ui .button:active,
99 .wp-core-ui .button:focus {
103 .wp-core-ui .button.hidden {
107 /* Style Reset buttons as simple text links */
109 .wp-core-ui input[type="reset"],
110 .wp-core-ui input[type="reset"]:hover,
111 .wp-core-ui input[type="reset"]:active,
112 .wp-core-ui input[type="reset"]:focus {
115 -webkit-box-shadow: none;
121 /* ----------------------------------------------------------------------------
122 2.0 - Default Button Style
123 ---------------------------------------------------------------------------- */
126 .wp-core-ui .button-secondary {
128 border-color: #cccccc;
130 -webkit-box-shadow: 0 1px 0 #cccccc;
131 box-shadow: 0 1px 0 #cccccc;
135 .wp-core-ui p .button {
136 vertical-align: baseline;
139 .wp-core-ui .button.hover,
140 .wp-core-ui .button:hover,
141 .wp-core-ui .button-secondary:hover,
142 .wp-core-ui .button.focus,
143 .wp-core-ui .button:focus,
144 .wp-core-ui .button-secondary:focus {
150 .wp-core-ui .button.focus,
151 .wp-core-ui .button:focus,
152 .wp-core-ui .button-secondary:focus,
153 .wp-core-ui .button-link:focus {
154 border-color: #5b9dd9;
155 -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
156 box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
159 .wp-core-ui .button.active,
160 .wp-core-ui .button.active:hover,
161 .wp-core-ui .button:active,
162 .wp-core-ui .button-secondary:active {
165 -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
166 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
167 -webkit-transform: translateY(1px);
168 -ms-transform: translateY(1px);
169 transform: translateY(1px);
172 .wp-core-ui .button.active:focus {
173 border-color: #5b9dd9;
175 inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
176 0 0 3px rgba( 0, 115, 170, .8 );
178 inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
179 0 0 3px rgba( 0, 115, 170, .8 );
182 .wp-core-ui .button[disabled],
183 .wp-core-ui .button:disabled,
184 .wp-core-ui .button.disabled,
185 .wp-core-ui .button-secondary[disabled],
186 .wp-core-ui .button-secondary:disabled,
187 .wp-core-ui .button-secondary.disabled,
188 .wp-core-ui .button-disabled {
189 color: #a0a5aa !important;
190 border-color: #ddd !important;
191 background: #f7f7f7 !important;
192 -webkit-box-shadow: none !important;
193 box-shadow: none !important;
194 text-shadow: 0 1px 0 #fff !important;
196 -webkit-transform: none !important;
197 -ms-transform: none !important;
198 transform: none !important;
201 /* Buttons that look like links, for a cross of good semantics with the visual */
202 .wp-core-ui .button-link {
205 -webkit-box-shadow: none;
208 -webkit-border-radius: 0;
215 .wp-core-ui .button-link:focus {
216 outline: #5b9dd9 solid 1px;
219 /* ----------------------------------------------------------------------------
220 3.0 - Primary Button Style
221 ---------------------------------------------------------------------------- */
223 .wp-core-ui .button-primary {
225 border-color: #0073aa #006799 #006799;
226 -webkit-box-shadow: 0 1px 0 #006799;
227 box-shadow: 0 1px 0 #006799;
229 text-decoration: none;
230 text-shadow: 0 -1px 1px #006799,
236 .wp-core-ui .button-primary.hover,
237 .wp-core-ui .button-primary:hover,
238 .wp-core-ui .button-primary.focus,
239 .wp-core-ui .button-primary:focus {
241 border-color: #006799;
245 .wp-core-ui .button-primary.focus,
246 .wp-core-ui .button-primary:focus {
247 -webkit-box-shadow: 0 1px 0 #0073aa,
249 box-shadow: 0 1px 0 #0073aa,
253 .wp-core-ui .button-primary.active,
254 .wp-core-ui .button-primary.active:hover,
255 .wp-core-ui .button-primary.active:focus,
256 .wp-core-ui .button-primary:active {
258 border-color: #006799;
259 -webkit-box-shadow: inset 0 2px 0 #006799;
260 box-shadow: inset 0 2px 0 #006799;
264 .wp-core-ui .button-primary[disabled],
265 .wp-core-ui .button-primary:disabled,
266 .wp-core-ui .button-primary-disabled,
267 .wp-core-ui .button-primary.disabled {
268 color: #66c6e4 !important;
269 background: #008ec2 !important;
270 border-color: #007cb2 !important;
271 -webkit-box-shadow: none !important;
272 box-shadow: none !important;
273 text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
277 .wp-core-ui .button.button-primary.button-hero {
278 -webkit-box-shadow: 0 2px 0 #006799;
279 box-shadow: 0 2px 0 #006799;
282 .wp-core-ui .button.button-primary.button-hero.active,
283 .wp-core-ui .button.button-primary.button-hero.active:hover,
284 .wp-core-ui .button.button-primary.button-hero.active:focus,
285 .wp-core-ui .button.button-primary.button-hero:active {
286 -webkit-box-shadow: inset 0 3px 0 #006799;
287 box-shadow: inset 0 3px 0 #006799;
290 /* ----------------------------------------------------------------------------
292 ---------------------------------------------------------------------------- */
294 .wp-core-ui .button-group {
296 display: inline-block;
299 vertical-align: middle;
302 .wp-core-ui .button-group > .button {
303 display: inline-block;
304 -webkit-border-radius: 0;
310 .wp-core-ui .button-group > .button-primary {
314 .wp-core-ui .button-group > .button:hover {
318 .wp-core-ui .button-group > .button:first-child {
319 -webkit-border-radius: 0 3px 3px 0;
320 border-radius: 0 3px 3px 0;
323 .wp-core-ui .button-group > .button:last-child {
324 -webkit-border-radius: 3px 0 0 3px;
325 border-radius: 3px 0 0 3px;
328 .wp-core-ui .button-group > .button:focus {
333 /* ----------------------------------------------------------------------------
334 5.0 - Responsive Button Styles
335 ---------------------------------------------------------------------------- */
337 @media screen and ( max-width: 782px ) {
340 .wp-core-ui .button.button-large,
341 .wp-core-ui .button.button-small,
348 vertical-align: middle;
353 #media-upload.wp-core-ui .button {
360 .media-frame.mode-grid .bulk-select .button {
364 /* Publish Metabox Options */
365 .wp-core-ui .save-post-status.button {
367 margin: 0 10px 0 14px; /* 14px right margin to match all other buttons */
370 /* Reset responsive styles in Press This, Customizer */
372 .wp-core-ui.wp-customizer .button {
378 vertical-align: inherit;
381 /* Reset responsive styles on Log in button on iframed login form */
383 .interim-login .button.button-large {