"Call to action" testpagina
Overzicht van het element in mogelijke structuren om te testen.
Tests
button
Visueel voorbeeld:
HTML-voorbeeld:
<button class="cta">Lorem ipsum</button>button disabled
Visueel voorbeeld:
HTML-voorbeeld:
<button class="cta" disabled>Lorem ipsum</button>States
button met een afbeelding
Visueel voorbeeld:
HTML-voorbeeld:
<button class="cta">Lorem ipsum <img src="/img/cat.svg" alt="Kat" /></button>Link als knop
Visueel voorbeeld:
Lorem ipsumHTML-voorbeeld:
<input class="button cta">Lorem ipsum</a>States
Link als knop: met een afbeelding
Visueel voorbeeld:
Lorem ipsum%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%2025.1%2030.3'%20style='enable-background:new%200%200%2025.1%2030.3;'%20xml:space='preserve'%3e%3cpath%20d='M22.5,8.8C21.9,8.4,21,8,20.1,7.7c-0.2-3.2-0.8-7.4-2.6-7.7c-2-0.3-3.2,3.4-4.1,6.6c-1,0-2,0-3,0.1C9.3,4.3,7.5,1.1,6.1,1.5%20C4.5,1.9,4.8,5.3,5.2,8c-1,0.5-1.9,1-2.6,1.8c-2.9,2.8-2.8,7.5-2.2,10c0.6,2.9,5.2,8.6,8.2,10c1.6,0.8,7,0.7,8.7,0%20c3.3-1.4,6.4-9,6.4-9S27.5,11.8,22.5,8.8z%20M7.8,23.8c-1.1,0-1.9-1.6-1.9-3.5s0.9-3.5,1.9-3.5c1.1,0,1.9,1.6,1.9,3.5%20S8.9,23.8,7.8,23.8z%20M17.1,23.8c-1.1,0-1.9-1.6-1.9-3.5s0.9-3.5,1.9-3.5c1.1,0,1.9,1.6,1.9,3.5S18.2,23.8,17.1,23.8z'/%3e%3c/svg%3e)
HTML-voorbeeld:
<input class="button cta">Lorem ipsum <img src="/img/cat.svg" alt="Kat" /></a>input type="button"
Visueel voorbeeld:
HTML-voorbeeld:
<input type="button" value="Button" class="cta">input type="button": disabled
Visueel voorbeeld:
HTML-voorbeeld:
<input type="button" value="Button disabled" class="cta" disabled>States
Visueel voorbeeld:
button type="submit"
Visueel voorbeeld:
HTML-voorbeeld:
<button type="submit" class="cta">Lorem ipsum</button>button type="submit": disabled
Visueel voorbeeld:
HTML-voorbeeld:
<button type="submit" value="Button disabled" class="cta" disabled>States
Visueel voorbeeld:
input type="submit"
Visueel voorbeeld:
HTML-voorbeeld:
<input type="submit" value="Input" class="cta">input type="submit": disabled
Visueel voorbeeld:
HTML-voorbeeld:
<input type="submit" value="Input" class="cta" disabled>button type="reset"
Visueel voorbeeld:
HTML-voorbeeld:
<button type="reset" class="cta">Lorem ipsum</button>button type="reset": disabled
Visueel voorbeeld:
HTML-voorbeeld:
<button type="reset" value="Button disabled" class="cta" disabled>States
Visueel voorbeeld:
input type="reset": disabled
Visueel voorbeeld:
HTML-voorbeeld:
<input type="reset" value="Input" class="cta" disabled>button type="reset"
Visueel voorbeeld:
HTML-voorbeeld:
<input type="reset" class="cta">button type="reset": disabled
Visueel voorbeeld:
HTML-voorbeeld:
<input type="reset" value="Button disabled" class="cta" disabled>