Buttons & Icon Common Buttons & Icons

Command Buttons Special action buttons

Examples and markup

Command styles can be applied to anything with the .win-command class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Commands with icons

To use one of the font icons provided with BootMetro, use a .win-commandicon and a .icon-* class.

Hover each command to display an explanatory tooltip.

   <button class="win-command" rel="tootlip" title="Simple command with only an icon">
      <span class="win-commandicon icon-cog"></span>
   </button>

   <button class="win-command" rel="tootlip" title="Command with icon and label">
      <span class="win-commandicon icon-cog"></span>
      <span class="win-label">With label</span>
   </button>

   <button class="win-command" rel="tootlip" title="Command with icon with border ring">
      <span class="win-commandicon win-commandring icon-cog"></span>
   </button>

   <button class="win-command" rel="tootlip" title="Command with icon and label with border ring">
      <span class="win-commandicon win-commandring icon-cog"></span>
      <span class="win-label">With ring & label</span>
   </button>
   

Basic Commands with dark theme

Hover each command to display an explanatory tooltip.

Commands with images

To use a custom image, use a .win-commandimage class.

   <button class="win-command" rel="tootlip" title="Simple command with an image inside">
      <span class="win-commandimage">
         <img src="assets/img/sample-tiles.png" width="42" height="42" alt=""/>
      </span>
   </button>

   <button class="win-command" rel="tootlip" title="Command with image and label">
      <span class="win-commandimage">
         <img src="assets/img/sample-tiles.png" width="42" height="42" alt=""/>
      </span>
      <span class="win-label">With label</span>
   </button>

   <button class="win-command" rel="tootlip" title="Command with image with border ring">
      <span class="win-commandimage win-commandring">
         <img src="assets/img/sample-tiles.png" width="42" height="42" alt=""/>
      </span>
   </button>

   <button class="win-command" rel="tootlip" title="Command with image and label with border ring">
      <span class="win-commandimage win-commandring">
         <img src="assets/img/sample-tiles.png" width="42" height="42" alt=""/>
      </span>
      <span class="win-label">With ring & label</span>
   </button>
   

Customization

   <button class="win-command orange" rel="tootlip" title="Command with icon and label with border ring, with a custom color">
      <span class="win-commandicon win-commandring icon-cog"></span>
      <span class="win-label">Customized</span>
   </button>
   

This is a sample CSS used to customized the above orange command:

   .win-command.orange .win-commandicon,
   .win-command.orange .win-label {
      color: #F09609;
   }
   .win-command.orange .win-commandring {
      border-color: #F09609;
   }
   .win-command.orange:hover .win-commandring {
       background-color: rgba(240, 150, 9, 0.4);
   }
   

---

Command button sizes