"Ghost button" testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

button

Visueel voorbeeld:

HTML-voorbeeld:

<button class="ghost">Lorem ipsum</button>

button disabled

Visueel voorbeeld:

HTML-voorbeeld:

<button class="ghost" disabled>Lorem ipsum</button>

States

• Focus
• Active
• Visited
• Hover

button met een afbeelding

Visueel voorbeeld:

Lorem ipsum

HTML-voorbeeld:

<button class="ghost">Lorem ipsum <img src="/img/cat.svg" alt="Kat" /></button>

Link als knop

Visueel voorbeeld:

HTML-voorbeeld:

<input class="button ghost">Lorem ipsum</a>

States

• Focus
• Active
• Visited
• Hover

Link als knop: met een afbeelding

Visueel voorbeeld:

Lorem ipsum

HTML-voorbeeld:

<input class="button ghost">Lorem ipsum <img src="/img/cat.svg" alt="Kat" /></a>

input type="button"

Visueel voorbeeld:

HTML-voorbeeld:

<input type="button" value="Button" class="ghost">

input type="button": disabled

Visueel voorbeeld:

HTML-voorbeeld:

<input type="button" value="Button disabled" class="ghost" disabled>

States

Visueel voorbeeld:

button type="submit"

Visueel voorbeeld:

HTML-voorbeeld:

<button type="submit" class="ghost">Lorem ipsum</button>

button type="submit": disabled

Visueel voorbeeld:

HTML-voorbeeld:

<button type="submit" value="Button disabled" class="ghost" disabled>

States

Visueel voorbeeld:

• Focus
• Active
• Visited
• Hover

input type="submit"

Visueel voorbeeld:

HTML-voorbeeld:

<input type="submit" value="Input" class="ghost">

input type="submit": disabled

Visueel voorbeeld:

HTML-voorbeeld:

<input type="submit" value="Input" class="ghost" disabled>

button type="reset"

Visueel voorbeeld:

HTML-voorbeeld:

<button type="reset" class="ghost">Lorem ipsum</button>

button type="reset": disabled

Visueel voorbeeld:

HTML-voorbeeld:

<button type="reset" value="Button disabled" class="ghost" disabled>

States

Visueel voorbeeld:

• Focus
• Active
• Visited
• Hover

input type="reset": disabled

Visueel voorbeeld:

HTML-voorbeeld:

<input type="reset" value="Input" class="ghost" disabled>

input type="reset"

Visueel voorbeeld:

HTML-voorbeeld:

<input type="reset" class="ghost">

input type="reset": disabled

Visueel voorbeeld:

HTML-voorbeeld:

<input type="reset" value="Button disabled" class="ghost" disabled>

States

Visueel voorbeeld: