WordPress.org
Get WordPress

Make WordPress Core

Ticket #56290: twenty-twelve-buttons-inside-group.txt

File twenty-twelve-buttons-inside-group.txt, 28.1 KB (added by sabernhardt, 5 months ago)

revised set of Button blocks, inside a Group block

Line 
1<!-- wp:paragraph -->
2<p>Click the first <strong>visited link</strong> to display the <code>:visited</code> style.</p>
3<!-- /wp:paragraph -->
4
5<!-- wp:group {"layout":{"type":"constrained"}} -->
6<div class="wp-block-group"><!-- wp:code -->
7<pre class="wp-block-code"><code>Fill style, default text and background colors</code></pre>
8<!-- /wp:code -->
9
10<!-- wp:buttons -->
11<div class="wp-block-buttons"><!-- wp:button -->
12<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="http://new.example.com/">new link</a></div>
13<!-- /wp:button -->
14
15<!-- wp:button -->
16<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">visited link</a></div>
17<!-- /wp:button -->
18
19<!-- wp:button -->
20<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">no href</a></div>
21<!-- /wp:button --></div>
22<!-- /wp:buttons -->
23
24<!-- wp:code -->
25<pre class="wp-block-code"><code>Fill style, Blue text color, default background color</code></pre>
26<!-- /wp:code -->
27
28<!-- wp:buttons -->
29<div class="wp-block-buttons"><!-- wp:button {"textColor":"blue"} -->
30<div class="wp-block-button"><a class="wp-block-button__link has-blue-color has-text-color wp-element-button" href="http://new.example.com/">new link</a></div>
31<!-- /wp:button -->
32
33<!-- wp:button {"textColor":"blue"} -->
34<div class="wp-block-button"><a class="wp-block-button__link has-blue-color has-text-color wp-element-button" href="#">visited link</a></div>
35<!-- /wp:button -->
36
37<!-- wp:button {"textColor":"blue"} -->
38<div class="wp-block-button"><a class="wp-block-button__link has-blue-color has-text-color wp-element-button">no href</a></div>
39<!-- /wp:button --></div>
40<!-- /wp:buttons -->
41
42<!-- wp:code -->
43<pre class="wp-block-code"><code>Fill style, #B31919 custom text color, default background color</code></pre>
44<!-- /wp:code -->
45
46<!-- wp:buttons -->
47<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"text":"#b31919"}}} -->
48<div class="wp-block-button"><a class="wp-block-button__link has-text-color wp-element-button" href="http://new.example.com/" style="color:#b31919">new link</a></div>
49<!-- /wp:button -->
50
51<!-- wp:button {"style":{"color":{"text":"#b31919"}}} -->
52<div class="wp-block-button"><a class="wp-block-button__link has-text-color wp-element-button" href="#" style="color:#b31919">visited link</a></div>
53<!-- /wp:button -->
54
55<!-- wp:button {"style":{"color":{"text":"#b31919"}}} -->
56<div class="wp-block-button"><a class="wp-block-button__link has-text-color wp-element-button" style="color:#b31919">no href</a></div>
57<!-- /wp:button --></div>
58<!-- /wp:buttons -->
59
60<!-- wp:code -->
61<pre class="wp-block-code"><code>Fill style, Blue text color, Light Gray background color</code></pre>
62<!-- /wp:code -->
63
64<!-- wp:buttons -->
65<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"light-gray","textColor":"blue"} -->
66<div class="wp-block-button"><a class="wp-block-button__link has-blue-color has-light-gray-background-color has-text-color has-background wp-element-button" href="http://new.example.com/">new link</a></div>
67<!-- /wp:button -->
68
69<!-- wp:button {"backgroundColor":"light-gray","textColor":"blue"} -->
70<div class="wp-block-button"><a class="wp-block-button__link has-blue-color has-light-gray-background-color has-text-color has-background wp-element-button" href="#">visited link</a></div>
71<!-- /wp:button -->
72
73<!-- wp:button {"backgroundColor":"light-gray","textColor":"blue"} -->
74<div class="wp-block-button"><a class="wp-block-button__link has-blue-color has-light-gray-background-color has-text-color has-background wp-element-button">no href</a></div>
75<!-- /wp:button --></div>
76<!-- /wp:buttons -->
77
78<!-- wp:code -->
79<pre class="wp-block-code"><code>Fill style, #B31919 custom dark text color, Light Gray background color</code></pre>
80<!-- /wp:code -->
81
82<!-- wp:buttons -->
83<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"light-gray","style":{"color":{"text":"#b31919"}}} -->
84<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-background-color has-text-color has-background wp-element-button" href="http://new.example.com/" style="color:#b31919">new link</a></div>
85<!-- /wp:button -->
86
87<!-- wp:button {"backgroundColor":"light-gray","style":{"color":{"text":"#b31919"}}} -->
88<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-background-color has-text-color has-background wp-element-button" href="#" style="color:#b31919">visited link</a></div>
89<!-- /wp:button -->
90
91<!-- wp:button {"backgroundColor":"light-gray","style":{"color":{"text":"#b31919"}}} -->
92<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-background-color has-text-color has-background wp-element-button" style="color:#b31919">no href</a></div>
93<!-- /wp:button --></div>
94<!-- /wp:buttons -->
95
96<!-- wp:code -->
97<pre class="wp-block-code"><code>Fill style, Light Gray text color, Blue background color</code></pre>
98<!-- /wp:code -->
99
100<!-- wp:buttons -->
101<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"blue","textColor":"light-gray"} -->
102<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-color has-blue-background-color has-text-color has-background wp-element-button" href="http://new.example.com/">new link</a></div>
103<!-- /wp:button -->
104
105<!-- wp:button {"backgroundColor":"blue","textColor":"light-gray"} -->
106<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-color has-blue-background-color has-text-color has-background wp-element-button" href="#">visited link</a></div>
107<!-- /wp:button -->
108
109<!-- wp:button {"backgroundColor":"blue","textColor":"light-gray"} -->
110<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-color has-blue-background-color has-text-color has-background wp-element-button">no href</a></div>
111<!-- /wp:button --></div>
112<!-- /wp:buttons -->
113
114<!-- wp:code -->
115<pre class="wp-block-code"><code>Fill style, Light Gray text color, #B31919 custom dark background color</code></pre>
116<!-- /wp:code -->
117
118<!-- wp:buttons -->
119<div class="wp-block-buttons"><!-- wp:button {"textColor":"light-gray","style":{"color":{"background":"#b31919"}}} -->
120<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-color has-text-color has-background wp-element-button" href="http://new.example.com/" style="background-color:#b31919">new link</a></div>
121<!-- /wp:button -->
122
123<!-- wp:button {"textColor":"light-gray","style":{"color":{"background":"#b31919"}}} -->
124<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-color has-text-color has-background wp-element-button" href="#" style="background-color:#b31919">visited link</a></div>
125<!-- /wp:button -->
126
127<!-- wp:button {"textColor":"light-gray","style":{"color":{"background":"#b31919"}}} -->
128<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-color has-text-color has-background wp-element-button" style="background-color:#b31919">no href</a></div>
129<!-- /wp:button --></div>
130<!-- /wp:buttons -->
131
132<!-- wp:code -->
133<pre class="wp-block-code"><code>Fill style, Blue text color, #B4FBB4 custom light background color</code></pre>
134<!-- /wp:code -->
135
136<!-- wp:buttons -->
137<div class="wp-block-buttons"><!-- wp:button {"textColor":"blue","style":{"color":{"background":"#b4fbb4"}}} -->
138<div class="wp-block-button"><a class="wp-block-button__link has-blue-color has-text-color has-background wp-element-button" href="http://new.example.com/" style="background-color:#b4fbb4">new link</a></div>
139<!-- /wp:button -->
140
141<!-- wp:button {"textColor":"blue","style":{"color":{"background":"#b4fbb4"}}} -->
142<div class="wp-block-button"><a class="wp-block-button__link has-blue-color has-text-color has-background wp-element-button" href="#" style="background-color:#b4fbb4">visited link</a></div>
143<!-- /wp:button -->
144
145<!-- wp:button {"textColor":"blue","style":{"color":{"background":"#b4fbb4"}}} -->
146<div class="wp-block-button"><a class="wp-block-button__link has-blue-color has-text-color has-background wp-element-button" style="background-color:#b4fbb4">no href</a></div>
147<!-- /wp:button --></div>
148<!-- /wp:buttons -->
149
150<!-- wp:code -->
151<pre class="wp-block-code"><code>Fill style, #B4FBB4 custom light text color, Dark Gray background color</code></pre>
152<!-- /wp:code -->
153
154<!-- wp:buttons -->
155<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"dark-gray","style":{"color":{"text":"#b4fbb4"}}} -->
156<div class="wp-block-button"><a class="wp-block-button__link has-dark-gray-background-color has-text-color has-background wp-element-button" href="http://new.example.com/" style="color:#b4fbb4">new link</a></div>
157<!-- /wp:button -->
158
159<!-- wp:button {"backgroundColor":"dark-gray","style":{"color":{"text":"#b4fbb4"}}} -->
160<div class="wp-block-button"><a class="wp-block-button__link has-dark-gray-background-color has-text-color has-background wp-element-button" href="#" style="color:#b4fbb4">visited link</a></div>
161<!-- /wp:button -->
162
163<!-- wp:button {"backgroundColor":"dark-gray","style":{"color":{"text":"#b4fbb4"}}} -->
164<div class="wp-block-button"><a class="wp-block-button__link has-dark-gray-background-color has-text-color has-background wp-element-button" style="color:#b4fbb4">no href</a></div>
165<!-- /wp:button --></div>
166<!-- /wp:buttons -->
167
168<!-- wp:code -->
169<pre class="wp-block-code"><code>Fill style, #B4FBB4 custom light text color, #3847B9 custom dark background color</code></pre>
170<!-- /wp:code -->
171
172<!-- wp:buttons -->
173<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"text":"#b4fbb4","background":"#3847b9"}}} -->
174<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="http://new.example.com/" style="color:#b4fbb4;background-color:#3847b9">new link</a></div>
175<!-- /wp:button -->
176
177<!-- wp:button {"style":{"color":{"text":"#b4fbb4","background":"#3847b9"}}} -->
178<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="#" style="color:#b4fbb4;background-color:#3847b9">visited link</a></div>
179<!-- /wp:button -->
180
181<!-- wp:button {"style":{"color":{"text":"#b4fbb4","background":"#3847b9"}}} -->
182<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:#b4fbb4;background-color:#3847b9">no href</a></div>
183<!-- /wp:button --></div>
184<!-- /wp:buttons -->
185
186<!-- wp:code -->
187<pre class="wp-block-code"><code>Fill style, #B31919 custom dark text color, #FFD9A9 custom light background color</code></pre>
188<!-- /wp:code -->
189
190<!-- wp:buttons -->
191<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#ffd9a9","text":"#b31919"}}} -->
192<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="http://new.example.com/" style="color:#b31919;background-color:#ffd9a9">new link</a></div>
193<!-- /wp:button -->
194
195<!-- wp:button {"style":{"color":{"background":"#ffd9a9","text":"#b31919"}}} -->
196<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="#" style="color:#b31919;background-color:#ffd9a9">visited link</a></div>
197<!-- /wp:button -->
198
199<!-- wp:button {"style":{"color":{"background":"#ffd9a9","text":"#b31919"}}} -->
200<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:#b31919;background-color:#ffd9a9">no href</a></div>
201<!-- /wp:button --></div>
202<!-- /wp:buttons -->
203
204<!-- wp:code -->
205<pre class="wp-block-code"><code>Fill style, default text color, Light Gray background color</code></pre>
206<!-- /wp:code -->
207
208<!-- wp:buttons -->
209<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"light-gray"} -->
210<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-background-color has-background wp-element-button" href="http://new.example.com/">new link</a></div>
211<!-- /wp:button -->
212
213<!-- wp:button {"backgroundColor":"light-gray"} -->
214<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-background-color has-background wp-element-button" href="#">visited link</a></div>
215<!-- /wp:button -->
216
217<!-- wp:button {"backgroundColor":"light-gray"} -->
218<div class="wp-block-button"><a class="wp-block-button__link has-light-gray-background-color has-background wp-element-button">no href</a></div>
219<!-- /wp:button --></div>
220<!-- /wp:buttons -->
221
222<!-- wp:code -->
223<pre class="wp-block-code"><code>Fill style, default text color, #B4FBB4 custom light background color</code></pre>
224<!-- /wp:code -->
225
226<!-- wp:buttons -->
227<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#b4fbb4"}}} -->
228<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="http://new.example.com/" style="background-color:#b4fbb4">new link</a></div>
229<!-- /wp:button -->
230
231<!-- wp:button {"style":{"color":{"background":"#b4fbb4"}}} -->
232<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="#" style="background-color:#b4fbb4">visited link</a></div>
233<!-- /wp:button -->
234
235<!-- wp:button {"style":{"color":{"background":"#b4fbb4"}}} -->
236<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#b4fbb4">no href</a></div>
237<!-- /wp:button --></div>
238<!-- /wp:buttons -->
239
240<!-- wp:code -->
241<pre class="wp-block-code"><code>Outline style, default text and background colors</code></pre>
242<!-- /wp:code -->
243
244<!-- wp:buttons -->
245<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
246<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="http://new.example.com/">new link</a></div>
247<!-- /wp:button -->
248
249<!-- wp:button {"className":"is-style-outline"} -->
250<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="#">visited link</a></div>
251<!-- /wp:button -->
252
253<!-- wp:button {"className":"is-style-outline"} -->
254<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">no href</a></div>
255<!-- /wp:button --></div>
256<!-- /wp:buttons -->
257
258<!-- wp:code -->
259<pre class="wp-block-code"><code>Outline style, Blue text color, default background color</code></pre>
260<!-- /wp:code -->
261
262<!-- wp:buttons -->
263<div class="wp-block-buttons"><!-- wp:button {"textColor":"blue","className":"is-style-outline"} -->
264<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-blue-color has-text-color wp-element-button" href="http://new.example.com/">new link</a></div>
265<!-- /wp:button -->
266
267<!-- wp:button {"textColor":"blue","className":"is-style-outline"} -->
268<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-blue-color has-text-color wp-element-button" href="#">visited link</a></div>
269<!-- /wp:button -->
270
271<!-- wp:button {"textColor":"blue","className":"is-style-outline"} -->
272<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-blue-color has-text-color wp-element-button">no href</a></div>
273<!-- /wp:button --></div>
274<!-- /wp:buttons -->
275
276<!-- wp:code -->
277<pre class="wp-block-code"><code>Outline style, #B31919 custom text color, default background color</code></pre>
278<!-- /wp:code -->
279
280<!-- wp:buttons -->
281<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","style":{"color":{"text":"#b31919"}}} -->
282<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color wp-element-button" href="http://new.example.com/" style="color:#b31919">new link</a></div>
283<!-- /wp:button -->
284
285<!-- wp:button {"className":"is-style-outline","style":{"color":{"text":"#b31919"}}} -->
286<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color wp-element-button" href="#" style="color:#b31919">visited link</a></div>
287<!-- /wp:button -->
288
289<!-- wp:button {"className":"is-style-outline","style":{"color":{"text":"#b31919"}}} -->
290<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color wp-element-button" style="color:#b31919">no href</a></div>
291<!-- /wp:button --></div>
292<!-- /wp:buttons -->
293
294<!-- wp:code -->
295<pre class="wp-block-code"><code>Outline style, Blue text color, Light Gray background color</code></pre>
296<!-- /wp:code -->
297
298<!-- wp:buttons -->
299<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"light-gray","textColor":"blue","className":"is-style-outline"} -->
300<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-blue-color has-light-gray-background-color has-text-color has-background wp-element-button" href="http://new.example.com/">new link</a></div>
301<!-- /wp:button -->
302
303<!-- wp:button {"backgroundColor":"light-gray","textColor":"blue","className":"is-style-outline"} -->
304<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-blue-color has-light-gray-background-color has-text-color has-background wp-element-button" href="#">visited link</a></div>
305<!-- /wp:button -->
306
307<!-- wp:button {"backgroundColor":"light-gray","textColor":"blue","className":"is-style-outline"} -->
308<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-blue-color has-light-gray-background-color has-text-color has-background wp-element-button">no href</a></div>
309<!-- /wp:button --></div>
310<!-- /wp:buttons -->
311
312<!-- wp:code -->
313<pre class="wp-block-code"><code>Outline style, #B31919 custom dark text color, Light Gray background color</code></pre>
314<!-- /wp:code -->
315
316<!-- wp:buttons -->
317<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"light-gray","className":"is-style-outline","style":{"color":{"text":"#b31919"}}} -->
318<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-background-color has-text-color has-background wp-element-button" href="http://new.example.com/" style="color:#b31919">new link</a></div>
319<!-- /wp:button -->
320
321<!-- wp:button {"backgroundColor":"light-gray","className":"is-style-outline","style":{"color":{"text":"#b31919"}}} -->
322<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-background-color has-text-color has-background wp-element-button" href="#" style="color:#b31919">visited link</a></div>
323<!-- /wp:button -->
324
325<!-- wp:button {"backgroundColor":"light-gray","className":"is-style-outline","style":{"color":{"text":"#b31919"}}} -->
326<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-background-color has-text-color has-background wp-element-button" style="color:#b31919">no href</a></div>
327<!-- /wp:button --></div>
328<!-- /wp:buttons -->
329
330<!-- wp:code -->
331<pre class="wp-block-code"><code>Outline style, Light Gray text color, Blue background color</code></pre>
332<!-- /wp:code -->
333
334<!-- wp:buttons -->
335<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"blue","textColor":"light-gray","className":"is-style-outline"} -->
336<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-color has-blue-background-color has-text-color has-background wp-element-button" href="http://new.example.com/">new link</a></div>
337<!-- /wp:button -->
338
339<!-- wp:button {"backgroundColor":"blue","textColor":"light-gray","className":"is-style-outline"} -->
340<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-color has-blue-background-color has-text-color has-background wp-element-button" href="#">visited link</a></div>
341<!-- /wp:button -->
342
343<!-- wp:button {"backgroundColor":"blue","textColor":"light-gray","className":"is-style-outline"} -->
344<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-color has-blue-background-color has-text-color has-background wp-element-button">no href</a></div>
345<!-- /wp:button --></div>
346<!-- /wp:buttons -->
347
348<!-- wp:code -->
349<pre class="wp-block-code"><code>Outline style, Light Gray text color, #B31919 custom dark background color</code></pre>
350<!-- /wp:code -->
351
352<!-- wp:buttons -->
353<div class="wp-block-buttons"><!-- wp:button {"textColor":"light-gray","className":"is-style-outline","style":{"color":{"background":"#b31919"}}} -->
354<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-color has-text-color has-background wp-element-button" href="http://new.example.com/" style="background-color:#b31919">new link</a></div>
355<!-- /wp:button -->
356
357<!-- wp:button {"textColor":"light-gray","className":"is-style-outline","style":{"color":{"background":"#b31919"}}} -->
358<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-color has-text-color has-background wp-element-button" href="#" style="background-color:#b31919">visited link</a></div>
359<!-- /wp:button -->
360
361<!-- wp:button {"textColor":"light-gray","className":"is-style-outline","style":{"color":{"background":"#b31919"}}} -->
362<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-color has-text-color has-background wp-element-button" style="background-color:#b31919">no href</a></div>
363<!-- /wp:button --></div>
364<!-- /wp:buttons -->
365
366<!-- wp:code -->
367<pre class="wp-block-code"><code>Outline style, Blue text color, #B4FBB4 custom light background color</code></pre>
368<!-- /wp:code -->
369
370<!-- wp:buttons -->
371<div class="wp-block-buttons"><!-- wp:button {"textColor":"blue","className":"is-style-outline","style":{"color":{"background":"#b4fbb4"}}} -->
372<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-blue-color has-text-color has-background wp-element-button" href="http://new.example.com/" style="background-color:#b4fbb4">new link</a></div>
373<!-- /wp:button -->
374
375<!-- wp:button {"textColor":"blue","className":"is-style-outline","style":{"color":{"background":"#b4fbb4"}}} -->
376<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-blue-color has-text-color has-background wp-element-button" href="#" style="background-color:#b4fbb4">visited link</a></div>
377<!-- /wp:button -->
378
379<!-- wp:button {"textColor":"blue","className":"is-style-outline","style":{"color":{"background":"#b4fbb4"}}} -->
380<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-blue-color has-text-color has-background wp-element-button" style="background-color:#b4fbb4">no href</a></div>
381<!-- /wp:button --></div>
382<!-- /wp:buttons -->
383
384<!-- wp:code -->
385<pre class="wp-block-code"><code>Outline style, #B4FBB4 custom light text color, Dark Gray background color</code></pre>
386<!-- /wp:code -->
387
388<!-- wp:buttons -->
389<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"dark-gray","className":"is-style-outline","style":{"color":{"text":"#b4fbb4"}}} -->
390<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-dark-gray-background-color has-text-color has-background wp-element-button" href="http://new.example.com/" style="color:#b4fbb4">new link</a></div>
391<!-- /wp:button -->
392
393<!-- wp:button {"backgroundColor":"dark-gray","className":"is-style-outline","style":{"color":{"text":"#b4fbb4"}}} -->
394<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-dark-gray-background-color has-text-color has-background wp-element-button" href="#" style="color:#b4fbb4">visited link</a></div>
395<!-- /wp:button -->
396
397<!-- wp:button {"backgroundColor":"dark-gray","className":"is-style-outline","style":{"color":{"text":"#b4fbb4"}}} -->
398<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-dark-gray-background-color has-text-color has-background wp-element-button" style="color:#b4fbb4">no href</a></div>
399<!-- /wp:button --></div>
400<!-- /wp:buttons -->
401
402<!-- wp:code -->
403<pre class="wp-block-code"><code>Outline style, #B4FBB4 custom light text color, #3847B9 custom dark background color</code></pre>
404<!-- /wp:code -->
405
406<!-- wp:buttons -->
407<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","style":{"color":{"text":"#b4fbb4","background":"#3847b9"}}} -->
408<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="http://new.example.com/" style="color:#b4fbb4;background-color:#3847b9">new link</a></div>
409<!-- /wp:button -->
410
411<!-- wp:button {"className":"is-style-outline","style":{"color":{"text":"#b4fbb4","background":"#3847b9"}}} -->
412<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="#" style="color:#b4fbb4;background-color:#3847b9">visited link</a></div>
413<!-- /wp:button -->
414
415<!-- wp:button {"className":"is-style-outline","style":{"color":{"text":"#b4fbb4","background":"#3847b9"}}} -->
416<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:#b4fbb4;background-color:#3847b9">no href</a></div>
417<!-- /wp:button --></div>
418<!-- /wp:buttons -->
419
420<!-- wp:code -->
421<pre class="wp-block-code"><code>Outline style, #B31919 custom dark text color, #FFD9A9 custom light background color</code></pre>
422<!-- /wp:code -->
423
424<!-- wp:buttons -->
425<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","style":{"color":{"background":"#ffd9a9","text":"#b31919"}}} -->
426<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="http://new.example.com/" style="color:#b31919;background-color:#ffd9a9">new link</a></div>
427<!-- /wp:button -->
428
429<!-- wp:button {"className":"is-style-outline","style":{"color":{"background":"#ffd9a9","text":"#b31919"}}} -->
430<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="#" style="color:#b31919;background-color:#ffd9a9">visited link</a></div>
431<!-- /wp:button -->
432
433<!-- wp:button {"className":"is-style-outline","style":{"color":{"background":"#ffd9a9","text":"#b31919"}}} -->
434<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:#b31919;background-color:#ffd9a9">no href</a></div>
435<!-- /wp:button --></div>
436<!-- /wp:buttons -->
437
438<!-- wp:code -->
439<pre class="wp-block-code"><code>Outline style, default text color, Light Gray background color</code></pre>
440<!-- /wp:code -->
441
442<!-- wp:buttons -->
443<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"light-gray","className":"is-style-outline"} -->
444<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-background-color has-background wp-element-button" href="http://new.example.com/">new link</a></div>
445<!-- /wp:button -->
446
447<!-- wp:button {"backgroundColor":"light-gray","className":"is-style-outline"} -->
448<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-background-color has-background wp-element-button" href="#">visited link</a></div>
449<!-- /wp:button -->
450
451<!-- wp:button {"backgroundColor":"light-gray","className":"is-style-outline"} -->
452<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-light-gray-background-color has-background wp-element-button">no href</a></div>
453<!-- /wp:button --></div>
454<!-- /wp:buttons -->
455
456<!-- wp:code -->
457<pre class="wp-block-code"><code>Outline style, default text color, #B4FBB4 custom light background color</code></pre>
458<!-- /wp:code -->
459
460<!-- wp:buttons -->
461<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","style":{"color":{"background":"#b4fbb4"}}} -->
462<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background wp-element-button" href="http://new.example.com/" style="background-color:#b4fbb4">new link</a></div>
463<!-- /wp:button -->
464
465<!-- wp:button {"className":"is-style-outline","style":{"color":{"background":"#b4fbb4"}}} -->
466<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background wp-element-button" href="#" style="background-color:#b4fbb4">visited link</a></div>
467<!-- /wp:button -->
468
469<!-- wp:button {"className":"is-style-outline","style":{"color":{"background":"#b4fbb4"}}} -->
470<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#b4fbb4">no href</a></div>
471<!-- /wp:button --></div>
472<!-- /wp:buttons --></div>
473<!-- /wp:group -->
474
475<!-- wp:paragraph -->
476<p><br>Paragraph with standard <a href="http://new.example.com/">new link</a> and <a href="#">visited link</a> in content</p>
477<!-- /wp:paragraph -->