1. Home
  2. Marco HTML
  3. Elements
  4. Buttons

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>
...
Was this article helpful to you? Yes 1 No