Easy-to-Use & Customizable 

Matrix themes buttons 

 

bg-tertiary hs-fullwidth has-no-gutter

Buttons with arrow

<a class="hs-button" style="padding: 18px 25px;" href="https://www.matrix-themes.com/templates/" target="">See templates<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow"> <path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z"> </path></svg></a>
See templates
<a class="hs-button ghost-dark" style="padding: 18px 25px;" href="https://www.matrix-themes.com/templates/" target="">See templates<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow"> <path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z"> </path></svg></a>
See templates
<a class="hs-button ghost-white" style="padding: 18px 25px;" href="https://www.matrix-themes.com/templates/" target="">See templates<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow"> <path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z"> </path></svg></a>
See templates

Buttons with icon

<div class="hs-button rel"> <div class="fa fa-paper-plane add-right-5"> </div> Button with icon <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a> </div>
Button with icon
<div class="hs-button rel ghost-dark"> <div class="fa fa-gift add-right-5"> </div> Button with icon <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a> </div>
Button with icon
<div class="hs-button rel ghost-white"> <div class="fa fa-rocket add-right-5"> </div> Button with icon <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a> </div>
Button with icon

Animated buttons

<a class="hs-button is-animate is-dark" href="http://www.matrix-themes.com/" target="">Animated button</a>
Animated button
<a class="hs-button is-animate is-dark ghost-dark" href="http://www.matrix-themes.com/" target="">Animated button</a>
Animated button
<a class="hs-button is-animate is-white ghost-white" href="http://www.matrix-themes.com/" target="">Animated button</a>
Animated button
Matrix Themes


Stand out with professional Jimdo website

Premium 24/7 Support · Lifetime Updates




has-right-col-border

Try Matrix Builder
draggable-logo

Global colors
  bg-primary
  bg-primary-light
  bg-primary-dark
  bg-secondary
  bg-secondary-dark
Template colors
  body
  top-header
  top-header-inner
  header
  header-inner
  navigation-inner
  navigation color
  dropdown background color
  content
Footer Styles
  background
  text color
  link color
  horizontal line
Buttons
  style 1
  style 2
  style 3
  text color
Mobile navigation
  background color
  navigation color
Other elements
  social icons
  top header border
  header border
  nav inner border
Template configurations
 
has-center-nav has-sticky-logo has-large-header g-font no-shopping-cart
 
Top header inner
 
 
 
Header inner
 
 
 
Navigation inner
 
 
 
Navigation styles
 
snip-nav --line01
 
Sub-menu (breadcrumbs) styles
 
size-15
 
Mobile Navigation styles
 
size-30
 
Content styles
 
form-white
 
Footer styles
 
o-form color-white white-outline-btn
 
Footer background image
 
 

 

Typography

Heading H1
weight-400
 
Heading H2
weight-400
 
Heading H3
weight-400
 
Buttons
weight-400
 
 
Advanced settings
 
Custom CSS

 

#cc-inner .my-class {

  color:#f0f0f0;

}

 


Note: All changes made here will be applied to your entire website.
is-switcher