Pattern Libraries

Ghost Buttons

Ghost buttons are transparent and empty buttons that have a thin border and contain a text label, they are most commonly used on websites that use a minimalist or flat design.

Example

HTML

<button class="ghostbutton" type="button">Ghost Button</button>

CSS

.ghostbutton{ background-color: white; color: black; text-align:center; height: 40px; width: 100px; border-radius: 2px; } .ghostbutton:hover{ background-color: #33cccc; }