Buttons of the Project

Button class	Button rendering	Button code
btn btn-primary	Primary Button 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 Button 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 Button with Icon Right 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 Button with Icon Right 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 Button with Icon Left 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 Button with Icon Left 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 Button 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 Button 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 Button with Icon Right 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 Button with Icon Right 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 Button with Icon Left 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 Button with Icon Left 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 Button 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 Button 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 Button with Icon Right 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 Button with Icon Right 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 Button with Icon Left 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 Button with Icon Left 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 Button 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 Button 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 Button with Icon Right 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 Button with Icon Right 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 Button with Icon Left 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 Button with Icon Left 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	Button Link with Icon Right 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	Button Link with Icon Left 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	Button Link with Icon Right 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	Button Link with Icon Left 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	Button Link with Icon Right 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	Button Link with Icon Left 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	Button Link with Icon Right 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	Button Link with Icon Left 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	Button Link Underlined 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	Button Link Underlined 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>