Buttons of the Project

Button class Button rendering Button code
btn btn-primary
Primary Link
<button type="button" class="btn btn-primary">Primary Button</button> <a href="#" class="btn btn-primary">Primary Link</a>
btn btn-secondary
Secondary Link
<button type="button" class="btn btn-secondary">Primary Button</button> <a href="#" class="btn btn-secondary">Primary Link</a>
btn btn-primary
Primary Link with Icon Right
<button type="button" class="btn btn-primary">
 <span>Primary Button with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn btn-primary">
 <span>Primary Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn btn-secondary
Secondary Link with Icon Right
<button type="button" class="btn btn-secondary">
 <span>Secondary Button with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn btn-secondary">
 <span>Secondary Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn btn-primary
Primary Link with Icon Left
<button type="button" class="btn btn-primary">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Primary Button with Icon Left</span>
</button>
<a href="#" class="btn btn-primary">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Primary Link with Icon Left</span>
</a>
btn btn-secondary
Secondary Link with Icon Left
<button type="button" class="btn btn-secondary">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Secondary Button with Icon Left</span>
</button>
<a href="#" class="btn btn-secondary">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Secondary Link with Icon Left</span>
</a>
btn btn-primary btn-sm
Primary Link
<button type="button" class="btn btn-primary btn-sm">Primary Button</button> <a href="#" class="btn btn-primary btn-sm">Primary Link</a>
btn btn-secondary btn-sm
Secondary Link
<button type="button" class="btn btn-secondary btn-sm">Primary Button</button> <a href="#" class="btn btn-secondary btn-sm">Primary Link</a>
btn btn-primary btn-sm
Primary Link with Icon Right
<button type="button" class="btn btn-primary btn-sm">
 <span>Primary Button with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn btn-primary btn-sm">
 <span>Primary Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn btn-secondary btn-sm
Secondary Link with Icon Right
<button type="button" class="btn btn-secondary btn-sm">
 <span>Secondary Button with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn btn-secondary btn-sm">
 <span>Secondary Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn btn-primary btn-sm
Primary Link with Icon Left
<button type="button" class="btn btn-primary btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Primary Button with Icon Left</span>
</button>
<a href="#" class="btn btn-primary btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Primary Link with Icon Left</span>
</a>
btn btn-secondary btn-sm
Secondary Link with Icon Left
<button type="button" class="btn btn-secondary btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Secondary Button with Icon Left</span>
</button>
<a href="#" class="btn btn-secondary btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Secondary Link with Icon Left</span>
</a>
btn btn-accent
Accent Link
<button type="button" class="btn btn-accent">Accent Button</button> <a href="#" class="btn btn-accent">Accent Link</a>
btn btn-transparent
Transparent Link
<button type="button" class="btn btn-transparent">Transparent Button</button> <a href="#" class="btn btn-transparent">Transparent Link</a>
btn btn-accent
Accent Link with Icon Right
<button type="button" class="btn btn-accent">
 <span>Accent Button with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn btn-accent">
 <span>Accent Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn btn-transparent
Transparent Link with Icon Right
<button type="button" class="btn btn-transparent">
 <span>Transparent Button with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn btn-transparent">
 <span>Transparent Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn btn-accent
Accent Link with Icon Left
<button type="button" class="btn btn-accent">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Accent Button with Icon Left</span>
</button>
<a href="#" class="btn btn-accent">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Accent Link with Icon Left</span>
</a>
btn btn-transparent
Transparent Link with Icon Left
<button type="button" class="btn btn-transparent">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Transparent Button with Icon Left</span>
</button>
<a href="#" class="btn btn-transparent">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Transparent Link with Icon Left</span>
</a>
btn btn-accent btn-sm
Accent Link
<button type="button" class="btn btn-accent btn-sm">Accent Button</button> <a href="#" class="btn btn-accent btn-sm">Accent Link</a>
btn btn-transparent btn-sm
Transparent Link
<button type="button" class="btn btn-transparent btn-sm">Transparent Button</button> <a href="#" class="btn btn-transparent btn-sm">Transparent Link</a>
btn btn-accent btn-sm
Accent Link with Icon Right
<button type="button" class="btn btn-accent btn-sm">
 <span>Accent Button with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn btn-accent btn-sm">
 <span>Accent Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn btn-transparent btn-sm
Transparent Link with Icon Right
<button type="button" class="btn btn-transparent btn-sm">
 <span>Transparent Button with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn btn-transparent btn-sm">
 <span>Transparent Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn btn-accent btn-sm
Accent Link with Icon Left
<button type="button" class="btn btn-accent btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Accent Button with Icon Left</span>
</button>
<a href="#" class="btn btn-accent btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Accent Link with Icon Left</span>
</a>
btn btn-transparent btn-sm
Transparent Link with Icon Left
<button type="button" class="btn btn-transparent btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Transparent Button with Icon Left</span>
</button>
<a href="#" class="btn btn-transparent btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Transparent Link with Icon Left</span>
</a>
btn-link
Link with Icon Right
<button type="button" class="btn-link">
 <span>Button Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn-link">
 <span>Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn-link
Link with Icon Left
<button type="button" class="btn-link">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Button Link with Icon Left</span>
</button>
<a href="#" class="btn-link">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Link with Icon Left</span>
</a>
btn-link btn-sm
Link with Icon Right
<button type="button" class="btn-link btn-sm">
 <span>Button Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn-link btn-sm">
 <span>Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn-link btn-sm
Link with Icon Left
<button type="button" class="btn-link btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Button Link with Icon Left</span>
</button>
<a href="#" class="btn-link btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Link with Icon Left</span>
</a>
btn-link btn-accent
Link with Icon Right
<button type="button" class="btn-link btn-accent">
 <span>Button Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn-link btn-accent">
 <span>Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn-link btn-accent
Link with Icon Left
<button type="button" class="btn-link btn-accent">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Button Link with Icon Left</span>
</button>
<a href="#" class="btn-link btn-accent">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Link with Icon Left</span>
</a>
btn-link btn-accent btn-sm
Link with Icon Right
<button type="button" class="btn-link btn-accent btn-sm">
 <span>Button Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</button>
<a href="#" class="btn-link btn-accent btn-sm">
 <span>Link with Icon Right</span>
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
</a>
btn-link btn-accent btn-sm
Link with Icon Left
<button type="button" class="btn-link btn-accent btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Button Link with Icon Left</span>
</button>
<a href="#" class="btn-link btn-accent btn-sm">
 <svg class="svg-icon icon-chevron">
  <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>
 </svg>
 <span>Link with Icon Left</span>
</a>
btn-link btn-underlined btn-sm
Link Underlined
<button type="button" class="btn-link btn-underlined btn-sm">
 Button Link Underlined </button>
<a href="#" class="btn-link btn-underlined btn-sm">
 Link Underlined </a>
btn-link btn-underlined btn-accent btn-sm
Link Underlined
<button type="button" class="btn-link btn-underlined btn-accent btn-sm">
 Button Link Underlined </button>
<a href="#" class="btn-link btn-underlined btn-accent btn-sm">
 Link Underlined </a>
btn-icon-background btn-primary
<button type="button" class="btn-icon-background btn-primary">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </button> <a href="#" class="btn-icon-background btn-primary">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </a>
btn-icon-background btn-secondary
<button type="button" class="btn-icon-background btn-secondary">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </button> <a href="#" class="btn-icon-background btn-secondary">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </a>
btn-icon-background btn-primary btn-accent
<button type="button" class="btn-icon-background btn-primary btn-accept">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </button> <a href="#" class="btn-icon-background btn-primary btn-accept">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </a>
btn-icon-background btn-secondary btn-transparent
<button type="button" class="btn-icon-background btn-secondary btn-transparent">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </button> <a href="#" class="btn-icon-background btn-secondary btn-transparent">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </a>
btn-icon-background-alt
<button type="button" class="btn-icon-background-alt">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/<  </svg> </button> <a href="#" class="btn-icon-background-alt">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/<  </svg> </a>
btn-icon-background-alt btn-secondary
<button type="button" class="btn-icon-background-alt btn-secondary">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </button> <a href="#" class="btn-icon-background-alt btn-secondary">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </a>
btn-icon-background-alt btn-accent
<button type="button" class="btn-icon-background-alt btn-accept">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </button> <a href="#" class="btn-icon-background-alt btn-accept">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </a>
btn-icon-background-alt btn-transparent
<button type="button" class="btn-icon-background-alt btn-transparent">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </button> <a href="#" class="btn-icon-background-alt btn-transparent">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </a>
btn-icon-background-alt btn-play
<button type="button" class="btn-icon-background-alt btn-play">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-play"/<  </svg> </button> <a href="#" class="btn-icon-background-alt btn-play">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-play"/<  </svg> </a>
btn-icon-background-alt btn-secondary btn-play
<button type="button" class="btn-icon-background-alt btn-secondary btn-play">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-arrow-forward"/<  </svg> </button> <a href="#" class="btn-icon-background-alt btn-secondary btn-play">  <svg class="svg-icon">   >use xlink:href="../images/spritemap/spritemap.svg#icon-play"/<  </svg> </a>
btn-icon-background-alt-variant
<button type="button" class="btn-icon-background-alt-variant">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>  </svg> </button> <a href="#" class="btn-icon-background-alt-variant">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>  </svg> </a>
btn-icon-background-alt-variant btn-secondary
<button type="button" class="btn-icon-background-alt-variant btn-secondary">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-left"/>  </svg> </button> <a href="#" class="btn-icon-background-alt btn-secondary">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-left"/>  </svg> </a>
btn-icon-background-alt-variant btn-accent
<button type="button" class="btn-icon-background-alt-variant btn-accent">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>  </svg> </button> <a href="#" class="btn-icon-background-alt-variant btn-accent">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>  </svg> </a>
btn-icon-background-alt-variant btn-transparent
<button type="button" class="btn-icon-background-alt-variant btn-transparent">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-left"/>  </svg> </button> <a href="#" class="btn-icon-background-alt btn-transparent">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-left"/>  </svg> </a>
btn-icon-background-alt-variant btn-slider
<button type="button" class="btn-icon-background-alt-variant btn-slider">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>  </svg> </button> <a href="#" class="btn-icon-background-alt-variant btn-slider">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>  </svg> </a>
btn-icon-background-alt-variant btn-secondary btn-slider
<button type="button" class="btn-icon-background-alt-variant btn-secondary btn-slider">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-left"/>  </svg> </button> <a href="#" class="btn-icon-background-alt btn-secondary btn-slider">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-left"/>  </svg> </a>
btn-icon-background-alt-variant btn-accent btn-slider
<button type="button" class="btn-icon-background-alt-variant btn-accent btn-slider">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>  </svg> </button> <a href="#" class="btn-icon-background-alt-variant btn-accent btn-slider">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-right"/>  </svg> </a>
btn-icon-background-alt-variant btn-transparent btn-slider
<button type="button" class="btn-icon-background-alt-variant btn-transparent btn-slider">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-left"/>  </svg> </button> <a href="#" class="btn-icon-background-alt btn-transparent btn-slider">  <svg class="svg-icon">   <use xlink:href="../images/spritemap/spritemap.svg#icon-chevron-left"/>  </svg> </a>
Check out our new mobile app!