metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="With the Metro 4 you can easily create different types of buttons, stylized to Windows Metro Style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Buttons - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Buttons</a></li> <li class="toc-entry"> <a href="#_push_buttons">Push buttons</a> <ul> <li class="toc-entry"><a href="#_push_buttons_with_icons">With icons</a></li> <li class="toc-entry"><a href="#_outline_buttons">Outline button</a></li> <li class="toc-entry"><a href="#_push_buttons_sizes">Any sizes</a></li> <li class="toc-entry"><a href="#_push_buttons_rounded">Rounded corners</a></li> <li class="toc-entry"><a href="#_push_buttons_square_and_cycle">Square & cycle</a></li> <li class="toc-entry"><a href="#_push_buttons_shadow">Shadowed button</a></li> </ul> </li> <li class="toc-entry"><a href="#_flat_button">Flat button</a></li> <li class="toc-entry"><a href="#_command_button">Command button</a></li> <li class="toc-entry"><a href="#_image_button">Image button</a></li> <li class="toc-entry"><a href="#_toolbars">Toolbars</a></li> <li class="toc-entry"><a href="#_shortcuts">Shortcut</a></li> <li class="toc-entry"><a href="#_dropdown_buttons">Dropdown</a></li> <li class="toc-entry"><a href="#_split_buttons">Split button</a></li> <li class="toc-entry"><a href="#_info_button">Info button</a></li> <li class="toc-entry"> <a href="#_pagination">Pagination</a> <ul> <li class="toc-entry"><a href="#_pagination_no_gaps">No gaps</a></li> <li class="toc-entry"><a href="#_pagination_disabled">Disabled items</a></li> <li class="toc-entry"><a href="#_pagination_sizing">Sizing</a></li> <li class="toc-entry"><a href="#_pagination_alignment">Alignment</a></li> </ul> </li> <li class="toc-entry"><a href="#_breadcrumbs">Breadcrumbs</a></li> <li class="toc-entry"><a href="#_buttons_group">Buttons group</a></li> <li class="toc-entry"><a href="#_buttons_action">Action button</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Buttons</h1> <p class="text-leader"> With the Metro 4 you can easily create different types of buttons, stylized to Windows Metro Style. </p>  <h3 id="_push_buttons">Push buttons</h3> <p> Button styles can be applied to anything with the <span class="tally">.button</span> class applied. To change button color use one of accent color subclasses: <span class="tally">.primary</span>, <span class="tally">.secondary</span>, <span class="tally">.success</span>, <span class="tally">.alert</span>, <span class="tally">.warning</span>, <span class="tally">.yellow</span>, <span class="tally">.info</span>, <span class="tally">.dark</span>. </p> <div class="example"> <button class="button">Default</button> <button class="button primary">Primary</button> <button class="button secondary">Secondary</button> <button class="button success">Success</button> <button class="button alert">Alert</button> <button class="button warning">Warning</button> <button class="button yellow">Yellow</button> <button class="button info">Info</button> <button class="button dark">Dark</button> <button class="button light">Light</button> <button class="button link">Link</button> </div> <pre class=""><code> <button class="button">Default</button> <button class="button primary">Primary</button> <button class="button secondary">Secondary</button> <button class="button success">Success</button> <button class="button alert">Alert</button> <button class="button warning">Warning</button> <button class="button yellow">Yellow</button> <button class="button info">Info</button> <button class="button dark">Dark</button> <button class="button light">Light</button> <button class="button link">Link</button> </code></pre> <h6>Note for .button class</h6> <p> The <span class="tally">.button</span> class are designed to be used with the <span class="tally"><button></span> element. However, you can also use these classes on <span class="tally"><a></span> or <span class="tally"><input></span> elements (though some browsers may apply a slightly different rendering). </p> <p> When using button class on <span class="tally"><a></span> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a <span class="tally">role="button"</span> to appropriately convey their purpose to assistive technologies such as screen readers. </p> <div class="example"> <a class="button" href="" role="button" onclick="return false">Link</a> <input class="button " type="button" value="Input"> <input class="button " type="submit" value="Submit"> <input class="button " type="reset" value="Reset"> </div> <pre class=""><code> <a class="button " href="#" role="button">Link</a> <input class="button " type="button" value="Input"> <input class="button " type="submit" value="Submit"> <input class="button " type="reset" value="Reset"> </code></pre> <h4 id="_push_buttons_with_icons">Push buttons with icons</h4> <p> Metro 4 support both types for adding icon to button: icon font and image. </p> <div class="example"> <button class="button"><span class="mif-checkmark"></span> Font</button> <button class="button"><span class="mif-users"></span></button> <button class="button"><img src="images/checkmark.png"> Image</button> <button class="button"><img src="images/keycdn-logo.svg"></button> </div> <pre class=""><code> <button class="button"><span class="mif-checkmark"></span> Font</button> <button class="button"><span class="mif-users"></span></button> <button class="button"><img src="images/checkmark.png"> Image</button> <button class="button"><img src="images/keycdn-logo.svg"></button> </code></pre> <h4 id="_outline_buttons">Outline buttons</h4> <p> In need of a button, but not the hefty background colors they bring? Add subclass <span class="tally">.outline</span> to remove all background images and colors on any button. </p> <div class="example"> <button class="button primary outline">Primary</button> <button class="button secondary outline">Secondary</button> <button class="button success outline">Success</button> <button class="button alert outline">Alert</button> <button class="button warning outline">Warning</button> <button class="button info outline">Info</button> <button class="button dark outline">Dark</button> <button class="button yellow outline">Yellow</button> </div> <pre class=""><code> <button class="button primary outline">Primary</button> <button class="button secondary outline">Secondary</button> <button class="button success outline">Success</button> <button class="button alert outline">Alert</button> <button class="button warning outline">Warning</button> <button class="button info outline">Info</button> <button class="button dark outline">Dark</button> <button class="button yellow outline">Yellow</button> </code></pre> <h6>Note for outline</h6> <p> <span class="tally">outline</span> class required one of accent color subclasses: <span class="tally">.primary</span>, <span class="tally">.secondary</span>, <span class="tally">.success</span>, <span class="tally">.alert</span>, <span class="tally">.warning</span>, <span class="tally">.yellow</span>, <span class="tally">.info</span>, <span class="tally">.dark</span>. </p> <h4 id="_push_buttons_sizes">Push button sizes</h4> <p> Fancy larger or smaller buttons? Add one of classes: <span class="tally">.mini</span>, <span class="tally">.small</span> or <span class="tally">.large</span> for additional sizes. </p> <div class="example"> <button class="button primary mini">mini</button> <button class="button primary small">small</button> <button class="button primary">default</button> <button class="button primary large">Large button</button> <button class="button primary outline mini">Mini</button> <button class="button secondary outline small">Small</button> <button class="button success outline">Default</button> <button class="button alert outline large">Outline Large</button> </div> <pre class=""><code> <button class="button primary mini">mini</button> <button class="button primary small">small</button> <button class="button primary">default</button> <button class="button primary large">Large button</button> <button class="button primary outline mini">Mini</button> <button class="button secondary outline small">Small</button> <button class="button success outline">Default</button> <button class="button alert outline large">Outline Large</button> </code></pre> <h4 id="_push_buttons_rounded">Rounded corners</h4> <p> Need rounded corners? Add class: <span class="tally">.rounded</span>. This class add <span class="tally">border-radius: 0.25rem</span> to button. </p> <div class="example"> <button class="button primary mini rounded">mini</button> <button class="button primary small rounded">small</button> <button class="button primary rounded">default</button> <button class="button primary large rounded">Large button</button> <button class="button primary outline mini rounded">Mini</button> <button class="button secondary outline small rounded">Small</button> <button class="button success outline rounded">Default</button> <button class="button alert outline large rounded">Outline Large</button> </div> <pre class=""><code> <button class="button primary mini rounded">mini</button> <button class="button success outline rounded">Default</button> </code></pre> <h4 id="_push_buttons_square_and_cycle">Square & cycle buttons</h4> <p> Need square or cycle button? Add one of modifiers classes: <span class="tally">.square</span> or <span class="tally">.cycle</span>. </p> <div class="example"> <div> <button class="button primary square mini"><span class="mif-checkmark"></span></button> <button class="button primary square small"><span class="mif-checkmark"></span></button> <button class="button primary square "><span class="mif-checkmark"></span></button> <button class="button primary square large"><span class="mif-checkmark"></span></button> <button class="button primary cycle mini"><span class="mif-checkmark"></span></button> <button class="button primary cycle small"><span class="mif-checkmark"></span></button> <button class="button primary cycle "><span class="mif-checkmark"></span></button> <button class="button primary cycle large"><span class="mif-checkmark"></span></button> </div> <br /> <div> <button class="button primary square mini outline"><span class="mif-download"></span></button> <button class="button primary square small outline"><span class="mif-download"></span></button> <button class="button primary square outline"><span class="mif-download"></span></button> <button class="button success square large outline"><span class="mif-download"></span></button> <button class="button secondary cycle mini outline"><span class="mif-play"></span></button> <button class="button warning cycle small outline"><span class="mif-play"></span></button> <button class="button dark cycle outline"><span class="mif-play"></span></button> <button class="button info cycle large outline"><span class="mif-checkmark"></span></button> </div> <br /> <div> <button class="button primary square mini rounded"><span class="mif-download"></span></button> <button class="button primary square small rounded"><span class="mif-download"></span></button> <button class="button primary square rounded"><span class="mif-download"></span></button> <button class="button success square large rounded"><span class="mif-download"></span></button> <button class="button primary square mini outline rounded"><span class="mif-download"></span></button> <button class="button primary square small outline rounded"><span class="mif-download"></span></button> <button class="button primary square outline rounded"><span class="mif-download"></span></button> <button class="button success square large outline rounded"><span class="mif-download"></span></button> </div> </div> <pre class=""><code> <button class="button primary square mini"></button> <button class="button primary square outline"></button> <button class="button primary cycle small outline"></button> <button class="button primary cycle "></button> </code></pre> <h4 id="_push_buttons_shadow">Shadowed button</h4> <p> You can easy create button with shadow. Add class <span class="tally">.drop-shadow</span> to button and get button with shadow. </p> <div class="example"> <button class="button drop-shadow">Default</button> <button class="button primary drop-shadow">Primary</button> <button class="button secondary drop-shadow">Secondary</button> <button class="button success drop-shadow">Success</button> <button class="button alert drop-shadow">Alert</button> <button class="button warning drop-shadow">Warning</button> <button class="button yellow drop-shadow">Yellow</button> <button class="button info drop-shadow">Info</button> <button class="button dark drop-shadow">Dark</button> <button class="button light drop-shadow">Light</button> </div> <pre class=""><code> <button class="button drop-shadow">Default</button> </code></pre>  <h3 id="_flat_button">Flat buttons</h3> <p> A button made of ink that displays ink reactions on press but does not lift. </p> <div class="example"> <button class="button flat-button">Flat button</button> </div> <pre><code class="html"> <button class="button flat-button">Flat button</button> </code></pre> <h3 id="_command_button">Command buttons</h3> <p> Need a Windows Command button? Create it with class <span class="tally">.command-button</span>. Command button support accent mode (primary, alert, ...), outline mode, rounded corners and left or right icon position. </p> <div class="example"> <button class="command-button d-flex m-1"> <span class="mif-share icon"></span> <span class="caption"> Yes, share and connect <small>Use this option for home or work</small> </span> </button> <button class="command-button primary d-flex m-1"> <span class="mif-share icon"></span> <span class="caption"> Yes, share and connect <small>Use this option for home or work</small> </span> </button> <button class="command-button primary outline rounded d-flex m-1"> <span class="mif-share icon"></span> <span class="caption"> Yes, share and connect <small>Use this option for home or work</small> </span> </button> <button class="command-button rounded icon-right alert d-flex m-1"> <span class="mif-share icon"></span> <span class="caption"> Yes, share and connect <small>Use this option for home or work</small> </span> </button> </div> <pre class=""><code> <button class="command-button"> <span class="mif-share icon"></span> <span class="caption"> Yes, share and connect <small>Use this option for home or work</small> </span> </button> <button class="command-button primary outline rounded"> <span class="mif-share icon"></span> <span class="caption"> Yes, share and connect <small>Use this option for home or work</small> </span> </button> <button class="command-button icon-right warning"> <span class="mif-share icon"></span> <span class="caption"> Yes, share and connect <small>Use this option for home or work</small> </span> </button> </code></pre> <h3 id="_image_button">Image buttons</h3> <p> With Metro 4 you can simple create image button. Use <span class="tally">.image-button</span> class to create image button. Image button support accent mode (primary, alert, ...), outline mode, rounded corners and left or right icon position. </p> <div class="example"> <div> <button class="image-button"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button icon-right"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> </div> <br /> <div> <button class="image-button primary"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button secondary"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button success"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button warning"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button alert"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button info"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> </div> <br /> <div> <button class="image-button primary outline"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button secondary outline"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button success outline"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button warning outline"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button alert outline"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button info outline"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> </div> </div> <pre class=""><code> <button class="image-button"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button icon-right"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button alert"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> <button class="image-button warning outline"> <span class="mif-share icon"></span> <span class="caption">Share it</span> </button> </code></pre> <h3 id="_shortcuts">Shortcuts</h3> <p> Need shortcut button? With Metro 4 you can simple create shortcut button. Use <span class="tally">.shortcut</span> class to create shortcut button. Shortcuts support accent mode (primary, alert, ...), outline mode and rounded corners. </p> <div class="example"> <button class="shortcut"> <span class="caption">Rocket</span> <span class="mif-rocket icon"></span> </button> <button class="shortcut primary"> <span class="tag">10</span> <span class="caption">Rocket</span> <span class="mif-rocket icon"></span> </button> <button class="shortcut secondary outline"> <span class="tag">10</span> <span class="caption">Rocket</span> <span class="mif-rocket icon"></span> </button> <button class="shortcut alert rounded"> <span class="tag">10</span> <span class="caption">Rocket</span> <span class="mif-rocket icon"></span> </button> <button class="shortcut alert rounded"> <span class="tag">10</span> <span class="caption">Rocket</span> <img src="images/checkmark.png" class="icon"> </button> <button class="shortcut warning no-caption"> <span class="mif-rocket icon"></span> </button> <button class="shortcut info outline rounded no-caption"> <span class="tag">10</span> <span class="mif-rocket icon"></span> </button> </div> <pre class=""><code> <button class="shortcut"> <span class="caption">Rocket</span> <span class="mif-rocket icon"></span> </button> <button class="shortcut"> <span class="tag">10</span> <span class="caption">Rocket</span> <span class="mif-rocket icon"></span> </button> <button class="shortcut primary"> <span class="tag">10</span> <span class="caption">Rocket</span> <span class="mif-rocket icon"></span> </button> <button class="shortcut secondary outline"> <span class="tag">10</span> <span class="caption">Rocket</span> <span class="mif-rocket icon"></span> </button> <button class="shortcut alert rounded"> <span class="tag">10</span> <span class="caption">Rocket</span> <img src="images/checkmark.png" class="icon"> </button> <button class="shortcut info outline rounded no-caption"> <span class="tag">10</span> <span class="mif-rocket icon"></span> </button> </code></pre> <h3 id="_toolbars">Toolbars</h3> <p> If you need to create toolbar, Metro 4 provides the special classes fro this: <span class="tally">.toolbar</span> and <span class="tally">.tool-button</span>. Toolbar buttons support accent mode (primary, alert, ...), outline mode and rounded corners. </p> <div class="example"> <div class="toolbar"> <button class="tool-button"><span class="mif-floppy-disk"></span></button> <button class="tool-button"><img src="images/checkmark.png"></button> <button class="tool-button text-button">Open</button> </div> <div class="toolbar"> <button class="tool-button primary"><span class="mif-floppy-disk"></span></button> <button class="tool-button info"><span class="mif-printer"></span></button> <button class="tool-button success text-button">Open</button> </div> <div class="toolbar"> <button class="tool-button primary outline"><span class="mif-floppy-disk"></span></button> <button class="tool-button info outline"><span class="mif-printer"></span></button> <button class="tool-button success outline text-button">Open</button> </div> <div class="toolbar"> <button class="tool-button primary rounded"><span class="mif-floppy-disk"></span></button> <button class="tool-button info rounded"><span class="mif-printer"></span></button> <button class="tool-button success rounded text-button">Open</button> </div> </div> <pre class=""><code> <div class="toolbar"> <button class="tool-button"><span class="mif-floppy-disk"></span></button> <button class="tool-button"><img src="images/checkmark.png"></button> <button class="tool-button">Open</button> </div> <div class="toolbar"> <button class="tool-button primary">...</button> <button class="tool-button primary outline">...</button> <button class="tool-button primary rounded">...</button> </div> </code></pre>  <h3 id="_dropdown_buttons">Dropdown</h3> <p> If you need to create button with dropdown menu, use <code>.dropdown-button</code> wrapper. </p> <div class="example"> <div class="dropdown-button"> <button class="button dropdown-toggle">Button</button> <ul class="d-menu" data-role="dropdown"> <li><a href="#">Reply</a></li> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> <li class="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> <div class="dropdown-button place-right"> <button class="button dropdown-toggle">Button</button> <ul class="d-menu place-right" data-role="dropdown"> <li><a href="#">Reply</a></li> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> <li class="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> </div> <pre class=""><code> <div class="dropdown-button"> <button class="button dropdown-toggle">Button</button> <ul class="d-menu" data-role="dropdown"> <li><a href="#">Reply</a></li> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> </ul> </div> <div class="dropdown-button place-right"> <button class="button dropdown-toggle">Button</button> <ul class="d-menu place-right" data-role="dropdown"> <li><a href="#">Reply</a></li> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> </ul> </div> </code></pre> <h3 id="_split_buttons">Split buttons</h3> <p> If you need to create split button with primary function and dropdown menu, use <span class="tally">.split-button</span> wrapper. </p> <div class="example d-flex flex-justify-between"> <div class="split-button"> <button class="button">Reply</button> <button class="split dropdown-toggle"></button> <ul class="d-menu" data-role="dropdown"> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> <li class="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> <div class="split-button"> <button class="button primary">Reply</button> <button class="split alert dropdown-toggle"></button> <ul class="d-menu" data-role="dropdown"> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> <li class="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> <div class="split-button"> <button class="button warning rounded">Reply</button> <button class="split info rounded dropdown-toggle"></button> <ul class="d-menu" data-role="dropdown"> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> <li class="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> <div class="split-button"> <button class="button warning rounded outline">Reply</button> <button class="split info rounded outline dropdown-toggle"></button> <ul class="d-menu" data-role="dropdown"> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> <li class="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> <div class="split-button"> <button class="button success" onclick="alert('Main button clicked!')">Reply</button> <button class="split info rounded" onclick="alert('Split button clicked!')"><span>...</span></button> </div> </div> <pre class=""><code> <div class="split-button"> <button class="button">Reply</button> <button class="split dropdown-toggle"></button> <ul class="d-menu" data-role="dropdown"> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> <li class="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> </code></pre> <h3 id="_info_button">Info button</h3> <p> If you need to create info button (as github split button) with primary function and additional info, use <span class="tally">.info-button</span> wrapper. </p> <div class="example"> <div class="info-button"> <a href="#" class="button"><span class="mif-star-full"></span> Star</a> <a href="#" class="info">5,547</a> </div> <div class="info-button bg-red fg-white bd-red"> <a href="#" class="button"><span class="mif-star-full"></span> Star</a> <a href="#" class="info">5,547</a> </div> <div class="info-button success bd-green rounded"> <a href="#" class="button"><span class="mif-star-full"></span> Star</a> <a href="#" class="info">5,547</a> </div> </div> <pre><code class="html"> <div class="info-button"> <a href="#" class="button"><span class="mif-star-full"></span> Star</a> <a href="#" class="info">5,547</a> </div> <div class="info-button bg-red fg-white bd-red"> <a href="#" class="button"><span class="mif-star-full"></span> Star</a> <a href="#" class="info">5,547</a> </div> <div class="info-button success bd-green rounded"> <a href="#" class="button"><span class="mif-star-full"></span> Star</a> <a href="#" class="info">5,547</a> </div> </code></pre> <h3 id="_pagination">Pagination</h3> <p> Need to create pagination? Create it easy with class <span class="tally">.pagination</span>. Pagination support accent mode (primary, alert, ...) and rounded corners. </p> <div class="example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item no-link"><a class="page-link">...</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> <li class="page-item"><a class="page-link" href="#">8</a></li> <li class="page-item"><a class="page-link" href="#">9</a></li> <li class="page-item service"><a class="page-link" href="#">Next ></a></li> </ul> <ul class="pagination alert"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item no-link"><a class="page-link">...</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> <li class="page-item"><a class="page-link" href="#">8</a></li> <li class="page-item"><a class="page-link" href="#">9</a></li> <li class="page-item service"><a class="page-link" href="#">Next ></a></li> </ul> <ul class="pagination success rounded"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item no-link"><a class="page-link">...</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> <li class="page-item"><a class="page-link" href="#">8</a></li> <li class="page-item"><a class="page-link" href="#">9</a></li> <li class="page-item service"><a class="page-link" href="#">Next ></a></li> </ul> </div> <pre class=""><code> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item no-link"><a class="page-link">...</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> <li class="page-item"><a class="page-link" href="#">8</a></li> <li class="page-item"><a class="page-link" href="#">9</a></li> <li class="page-item service"><a class="page-link" href="#">Next ></a></li> </ul> <ul class="pagination alert"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item no-link"><a class="page-link">...</a></li> <li class="page-item"><a class="page-link" href="#">7</a></li> <li class="page-item"><a class="page-link" href="#">8</a></li> <li class="page-item"><a class="page-link" href="#">9</a></li> <li class="page-item service"><a class="page-link" href="#">Next ></a></li> </ul> <ul class="pagination success rounded"> <li class="page-item"