Buttons

Marco uses 4 types of buttons. Each of them can modify by adding classes presented below. All buttons you can see in demo (elements -> buttons).

---

Button size:

 

btn-xs

extra small button

btn-sm

small button

btn-md

medium button

btn-lg

large button

btn-full

button extends the full width of parent element.

---

Button type:

 

btn-border-animate

button with transparent background and animated border.

btn-solid

button with solid background color

btn-icon

button with solid background color and SVG icon

btn-load-more

button with transparent background and bottom border

---

Button style:

 

btn-dark

button with dark background color and light text color

btn-light

button with light background color and dark text color

btn-rounded

button with rounded corners

---

Button example:

 

... 
   DARK BUTTON WITH ANIMATED BORDER
   <button class="btn btn-sm btn-border-animate btn-dark">button text 
      <span class="top button-border"></div> 
      <span class="left left-bottom button-border"></div> 
      <span class="left left-top button-border"></div> 
      <span class="bottom bottom-right button-border"></div>       
      <span class="bottom bottom-left button-border"></div>       
      <span class="right button-border"></div> 
   </button>
...