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 .ie8 .wp-core-ui .button-link:focus {
104 outline: #5b9dd9 solid 1px;
107 .wp-core-ui .button.hidden {
111 /* Style Reset buttons as simple text links */
113 .wp-core-ui input[type="reset"],
114 .wp-core-ui input[type="reset"]:hover,
115 .wp-core-ui input[type="reset"]:active,
116 .wp-core-ui input[type="reset"]:focus {
119 -webkit-box-shadow: none;
125 /* ----------------------------------------------------------------------------
126 2.0 - Default Button Style
127 ---------------------------------------------------------------------------- */
130 .wp-core-ui .button-secondary {
132 border-color: #cccccc;
134 -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
135 box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
139 .wp-core-ui p .button {
140 vertical-align: baseline;
143 .wp-core-ui .button-link {
150 .wp-core-ui .button.hover,
151 .wp-core-ui .button:hover,
152 .wp-core-ui .button-secondary:hover,
153 .wp-core-ui .button.focus,
154 .wp-core-ui .button:focus,
155 .wp-core-ui .button-secondary:focus {
161 .wp-core-ui .button.focus,
162 .wp-core-ui .button:focus,
163 .wp-core-ui .button-secondary:focus,
164 .wp-core-ui .button-link:focus {
167 0 0 2px 1px rgba(30, 140, 190, .8);
170 0 0 2px 1px rgba(30, 140, 190, .8);
173 .wp-core-ui .button.active,
174 .wp-core-ui .button.active:hover,
175 .wp-core-ui .button:active,
176 .wp-core-ui .button-secondary:active {
180 -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
181 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
184 .wp-core-ui .button.active:focus {
186 inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
188 0 0 2px 1px rgba(30, 140, 190, .8);
190 inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
192 0 0 2px 1px rgba(30, 140, 190, .8);
195 .wp-core-ui .button[disabled],
196 .wp-core-ui .button:disabled,
197 .wp-core-ui .button.disabled,
198 .wp-core-ui .button-secondary[disabled],
199 .wp-core-ui .button-secondary:disabled,
200 .wp-core-ui .button-secondary.disabled,
201 .wp-core-ui .button-disabled {
202 color: #a0a5aa !important;
203 border-color: #ddd !important;
204 background: #f7f7f7 !important;
205 -webkit-box-shadow: none !important;
206 box-shadow: none !important;
207 text-shadow: 0 1px 0 #fff !important;
211 /* ----------------------------------------------------------------------------
212 3.0 - Primary Button Style
213 ---------------------------------------------------------------------------- */
215 .wp-core-ui .button-primary {
217 border-color: #0073aa;
218 -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 );
219 box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 );
221 text-decoration: none;
224 .wp-core-ui .button-primary.hover,
225 .wp-core-ui .button-primary:hover,
226 .wp-core-ui .button-primary.focus,
227 .wp-core-ui .button-primary:focus {
229 border-color: #0073aa;
230 -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
231 box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 );
235 .wp-core-ui .button-primary.focus,
236 .wp-core-ui .button-primary:focus {
237 border-color: #0e3950;
239 inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
241 0 0 2px 1px rgba(30, 140, 190, .8);
243 inset 0 1px 0 rgba( 120, 200, 230, 0.6 ),
245 0 0 2px 1px rgba(30, 140, 190, .8);
248 .wp-core-ui .button-primary.active,
249 .wp-core-ui .button-primary.active:hover,
250 .wp-core-ui .button-primary.active:focus,
251 .wp-core-ui .button-primary:active {
253 border-color: #005082;
254 color: rgba( 255, 255, 255, 0.95 );
255 -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
256 box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 );
260 .wp-core-ui .button-primary[disabled],
261 .wp-core-ui .button-primary:disabled,
262 .wp-core-ui .button-primary-disabled,
263 .wp-core-ui .button-primary.disabled {
264 color: #94cde7 !important;
265 background: #298cba !important;
266 border-color: #1b607f !important;
267 -webkit-box-shadow: none !important;
268 box-shadow: none !important;
269 text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important;
273 /* ----------------------------------------------------------------------------
275 ---------------------------------------------------------------------------- */
277 .wp-core-ui .button-group {
279 display: inline-block;
282 vertical-align: middle;
285 .wp-core-ui .button-group > .button {
286 display: inline-block;
287 -webkit-border-radius: 0;
293 .wp-core-ui .button-group > .button-primary {
297 .wp-core-ui .button-group > .button:hover {
301 .wp-core-ui .button-group > .button:first-child {
302 -webkit-border-radius: 0 3px 3px 0;
303 border-radius: 0 3px 3px 0;
306 .wp-core-ui .button-group > .button:last-child {
307 -webkit-border-radius: 3px 0 0 3px;
308 border-radius: 3px 0 0 3px;
311 .wp-core-ui .button-group > .button:focus {
316 /* ----------------------------------------------------------------------------
317 5.0 - Responsive Button Styles
318 ---------------------------------------------------------------------------- */
320 @media screen and ( max-width: 782px ) {
323 .wp-core-ui .button.button-large,
324 .wp-core-ui .button.button-small,
331 vertical-align: middle;
336 #media-upload.wp-core-ui .button {
343 .media-frame.mode-grid .bulk-select .button {
347 /* Publish Metabox Options */
348 .wp-core-ui .save-post-status.button {
350 margin: 0 10px 0 14px; /* 14px right margin to match all other buttons */
353 /* Reset responsive styles in Press This, Customizer */
355 .wp-core-ui.wp-customizer .button {
361 vertical-align: inherit;
364 /* Reset responsive styles on Log in button on iframed login form */
366 .interim-login .button.button-large {