1
/* ----------------------------------------------------------------------------
4
WordPress-style Buttons
5
=======================
6
Create a button by adding the %60.button` class to an element. For backwards
7
compatibility, we support several other classes (such as `.button-secondary`),
8
but these will *not* work with the stackable classes described below.
12
To display a primary button style, add the `.button-primary` class to a button.
16
Adjust a button's size by adding the `.button-large` or `.button-small` class.
20
Lock the state of a button by adding the name of the pseudoclass as
21
an actual class (e.g. `.hover` for `:hover`).
27
2.0 - Default Button Style
28
3.0 - Primary Button Style
30
5.0 - Responsive Button Styles
32
---------------------------------------------------------------------------- */
34
/* ----------------------------------------------------------------------------
36
---------------------------------------------------------------------------- */
39
.wp-core-ui .button-primary,
40
.wp-core-ui .button-secondary {
41
display: inline-block;
42
text-decoration: none;
51
-webkit-border-radius: 3px;
52
-webkit-appearance: none;
55
-webkit-box-sizing: border-box;
56
-moz-box-sizing: border-box;
57
box-sizing: border-box;
60
/* Remove the dotted border on :focus and the extra padding in Firefox */
61
.wp-core-ui button::-moz-focus-inner,
62
.wp-core-ui input[type="reset"]::-moz-focus-inner,
63
.wp-core-ui input[type="button"]::-moz-focus-inner,
64
.wp-core-ui input[type="submit"]::-moz-focus-inner {
66
border-style: solid none;
67
border-color: transparent;
71
.wp-core-ui .button.button-large,
72
.wp-core-ui .button-group.button-large .button {
78
.wp-core-ui .button.button-small,
79
.wp-core-ui .button-group.button-small .button {
86
.wp-core-ui .button.button-hero,
87
.wp-core-ui .button-group.button-hero .button {
94
.wp-core-ui .button:active {
98
.wp-core-ui .button.hidden {
102
/* Style Reset buttons as simple text links */
104
.wp-core-ui input[type="reset"],
105
.wp-core-ui input[type="reset"]:hover,
106
.wp-core-ui input[type="reset"]:active,
107
.wp-core-ui input[type="reset"]:focus {
110
-moz-box-shadow: none;
111
-webkit-box-shadow: none;
117
/* ----------------------------------------------------------------------------
118
2.0 - Default Button Style
119
---------------------------------------------------------------------------- */
122
.wp-core-ui .button-secondary {
124
border-color: #cccccc;
127
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
128
box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
132
.wp-core-ui p .button {
133
vertical-align: baseline;
136
.wp-core-ui .button.hover,
137
.wp-core-ui .button:hover,
138
.wp-core-ui .button-secondary:hover,
139
.wp-core-ui .button.focus,
140
.wp-core-ui .button:focus,
141
.wp-core-ui .button-secondary:focus {
147
.wp-core-ui .button.focus,
148
.wp-core-ui .button:focus,
149
.wp-core-ui .button-secondary:focus {
150
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
151
box-shadow: 1px 1px 1px rgba(0,0,0,.2);
154
.wp-core-ui .button.active,
155
.wp-core-ui .button.active:hover,
156
.wp-core-ui .button.active:focus,
157
.wp-core-ui .button:active,
158
.wp-core-ui .button-secondary:active {
162
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
163
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
166
.wp-core-ui .button[disabled],
167
.wp-core-ui .button:disabled,
168
.wp-core-ui .button-secondary[disabled],
169
.wp-core-ui .button-secondary:disabled,
170
.wp-core-ui .button-disabled {
171
color: #aaa !important;
172
border-color: #ddd !important;
173
-webkit-box-shadow: none !important;
174
box-shadow: none !important;
175
text-shadow: 0 1px 0 #fff !important;
179
/* ----------------------------------------------------------------------------
180
3.0 - Primary Button Style
181
---------------------------------------------------------------------------- */
183
.wp-core-ui .button-primary {
185
border-color: #0074a2;
186
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
187
box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
189
text-decoration: none;
192
.wp-core-ui .button-primary.hover,
193
.wp-core-ui .button-primary:hover,
194
.wp-core-ui .button-primary.focus,
195
.wp-core-ui .button-primary:focus {
197
border-color: #0074a2;
198
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
199
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
203
.wp-core-ui .button-primary.focus,
204
.wp-core-ui .button-primary:focus {
205
border-color: #0e3950;
206
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
207
box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
210
.wp-core-ui .button-primary.active,
211
.wp-core-ui .button-primary.active:hover,
212
.wp-core-ui .button-primary.active:focus,
213
.wp-core-ui .button-primary:active {
215
border-color: #005684;
216
color: rgba(255,255,255,0.95);
217
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
218
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
222
.wp-core-ui .button-primary[disabled],
223
.wp-core-ui .button-primary:disabled,
224
.wp-core-ui .button-primary-disabled {
225
color: #94cde7 !important;
226
background: #298cba !important;
227
border-color: #1b607f !important;
228
-webkit-box-shadow: none !important;
229
box-shadow: none !important;
230
text-shadow: 0 -1px 0 rgba(0,0,0,0.1) !important;
234
/* ----------------------------------------------------------------------------
236
---------------------------------------------------------------------------- */
238
.wp-core-ui .button-group {
240
display: inline-block;
243
vertical-align: middle;
246
.wp-core-ui .button-group > .button {
247
display: inline-block;
253
.wp-core-ui .button-group > .button-primary {
257
.wp-core-ui .button-group > .button:hover {
261
.wp-core-ui .button-group > .button:first-child {
262
border-radius: 0 3px 3px 0;
265
.wp-core-ui .button-group > .button:last-child {
266
border-radius: 3px 0 0 3px;
269
/* ----------------------------------------------------------------------------
270
5.0 - Responsive Button Styles
271
---------------------------------------------------------------------------- */
273
@media screen and ( max-width: 782px ) {
276
.wp-core-ui .button.button-large,
277
.wp-core-ui .button.button-small,
284
vertical-align: middle;
289
#media-upload.wp-core-ui .button {
296
/* Publish Metabox Options */
297
.wp-core-ui .save-post-status.button {
299
margin: 0 10px 0 14px; /* 14px right margin to match all other buttons */
302
/* Reset responsive styles in Press This, Customizer */
304
.wp-core-ui.wp-customizer .button,
305
.press-this.wp-core-ui .button,
306
.press-this input#publish,
307
.press-this input#save-post,
308
.press-this a.preview {
314
vertical-align: inherit;
317
/* Reset responsive styles on Log in button on iframed login form */
319
.interim-login .button.button-large {