Skip to main content

Icon Buttons

A reference of the available GeoGirafe button styles.

Big button​

Icon only​

<button class="gg-icon-button gg-big">
  <img src="icons/themes.svg" />
</button>

Icon & Text​

<button class="gg-icon-button gg-big-withtext">
  <img src="icons/themes.svg" />
  <span>themes</span>
</button>

Medium Button​

Icon only​

<button class="gg-icon-button gg-medium">
  <img src="icons/themes.svg" />
</button>

Icon & Text​

<button class="gg-icon-button gg-medium-withtext">
  <img src="icons/themes.svg" />
  <span>themes</span>
</button>

Small Button​

Icon only​

<button class="gg-icon-button gg-small">
  <img src="icons/themes.svg" />
</button>

Icon & Text​

<button class="gg-icon-button gg-small-withtext">
  <img src="icons/themes.svg" />
  <span>themes</span>
</button>

Rotations​

Rotation 90°, 180° and 270°​

  <button class="gg-icon-button gg-big gg-rotate180">
    <img src="icons/user.svg" />
  </button>

Spinning button​

Infinite spinning​

<button class="gg-icon-button gg-big">
  <img src="icons/themes.svg" class="gg-spin" />
</button>

Periodic spinning​

<button class="gg-icon-button gg-big">
  <img src="icons/themes.svg" class="gg-spin-wait" />
</button>