materialx-yoo

<!DOCTYPE html> <html class="no-js" lang="en"> <head>  <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="author" content="YooKits" />  <title>UI Kits- Buttons</title>  <link rel="icon" href="assets/img/favicon.png">  <link rel="stylesheet" type="text/css" href="assets/css/material-icons.css" /> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="assets/css/materialX.css" /> </head> <body> <div class="yoo-height-b60 yoo-height-lg-b60"></div> <header class="yoo-header yoo-style1 yoo-sticky-menu"> <div class="yoo-main-header"> <div class="yoo-main-header-in"> <div class="yoo-main-header-left"> <a href="index.html" class="yoo-logo-link yoo-light-logo"><img src="assets/img/logo.svg" alt="logo-light" /></a>   </div> <div class="yoo-main-header-right"> <div class="yoo-nav-wrap yoo-fade-up"> <div class="yoo-nav-toggle"> <i class="material-icons-outlined">more_vert</i> </div> <nav class="yoo-nav yoo-desktop-nav"> <ul class="yoo-nav-list"> <li> <a href="#"><i class="material-icons">home</i> Home</a> </li> <li> <a href="#"><i class="material-icons">folder</i> Contact</a> </li> </ul> </nav>  </div>  <ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0"> <li> <div class="yoo-search-wrap"> <form action="#" class="yoo-search yoo-style1"> <input type="text" placeholder="Search people & places" class="yoo-search-input"> <button class="yoo-search-submit"><i class="material-icons-outlined">search</i></button> </form> <span class="yoo-search-toggle-mb yoo-ex-nav-btn"><i class="material-icons-outlined">search</i></span> </div> </li> <li> <div class="yoo-toggle-body yoo-language-nav"> <div class="yoo-toggle-btn yoo-ex-nav-btn" data-ripple="ripple" data-ripple-color="#fff"> <i class="material-icons">translate</i> <span class="yoo-selected-language">English</span> <span class="yoo-language-arrow"><i class="material-icons">keyboard_arrow_down</i></span> </div> <ul class="yoo-dropdown yoo-style1"> <li> <a href="#">English</a> </li> <li> <a href="#">Русский</a> </li> <li> <a href="#">Español</a> </li> <li> <a href="#">日本語</a> </li> </ul> </div> </li> <li> <div class="yoo-toggle-body yoo-message-area yoo-style1"> <span class="yoo-toggle-btn yoo-ex-nav-btn yoo-message-btn"> <i class="material-icons">email</i> </span> <div class="yoo-dropdown yoo-notify-dropdown"> <h2 class="yoo-nofify-title"> <span class="yoo-nofify-title-left">Messages</span> <span class="yoo-nofify-title-right"><a href="#">Mark All as Read</a></span> </h2> <ul class="yoo-nofify-list yoo-style1 yoo-mp0"> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/1.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Bob Dylan <span class="yoo-online-status yoo-live"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">10:23</span> </div> </a> </li> <li> <a href="#" class="active"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/2.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> David Gilmour <span class="yoo-online-status"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">12:23</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/3.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Jeff Beck <span class="yoo-online-status yoo-live"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 05</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/4.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Guthrie Govan <span class="yoo-online-status"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 10</span> </div> </a> </li> <li> <a href="#"> <div class="yoo-nofify-thumb"> <img src="assets/img/user/5.jpg" alt=""> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head"> Eric Johnson <span class="yoo-online-status"></span> </h3> <div class="yoo-msg"> Thank you for purchasing! <br> When you arrive prepared to negotiate </div> <span class="yoo-notify-time">Jan 16</span> </div> </a> </li> </ul> <a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a> </div> </div> </li> <li> <div class="yoo-toggle-body yoo-notice-area yoo-style1"> <span class="yoo-toggle-btn yoo-ex-nav-btn yoo-notice-btn"> <i class="material-icons">notifications</i> <span class="yoo-ex-nav-label">3</span> </span> <div class="yoo-dropdown yoo-notify-dropdown"> <h2 class="yoo-nofify-title">Notification</h2> <ul class="yoo-nofify-list yoo-style1 yoo-mp0"> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-purple-box"> <i class="material-icons-outlined">supervisor_account</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">Invite your friends to dashboard.</h3> <span class="yoo-notify-time">5 hour ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-green-box"> <i class="material-icons-outlined">calendar_today</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">3 Tasks pending this month.</h3> <span class="yoo-notify-time">6 hour ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-blue-box"> <i class="material-icons-outlined">favorite_border</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">7 People loved your activity.</h3> <span class="yoo-notify-time">9 hour ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-purple-box"> <i class="material-icons-outlined">chat_bubble_outline</i> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">John commented on activity.</h3> <span class="yoo-notify-time">1 day ago</span> </div> </a> </li> <li> <a href="#" class="yoo-nofify-list-in"> <div class="yoo-nofify-icon yoo-indigo-box"> <img src="assets/img/user/1.jpg" alt="msg1" /> </div> <div class="yoo-nofify-text"> <h3 class="yoo-nofify-text-head">Click your picture or add an account.</h3> <span class="yoo-notify-time">2 days ago</span> </div> </a> </li> </ul> <a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a> </div> </div> </li> <li> <div class="yoo-toggle-body yoo-profile-nav yoo-style1"> <div class="yoo-toggle-btn yoo-profile-nav-btn"> <div class="yoo-profile-nav-text"> <span>Welcome,</span> <h4>Thom Yorke</h4> </div> <div class="yoo-profile-nav-img"> <img src="assets/img/profile-pic.png" alt="profile"> </div> </div> <ul class="yoo-dropdown yoo-style1"> <li> <a href="#"><i class="material-icons">account_circle</i>My Profile</a> </li> <li> <a href="#"><i class="material-icons">settings</i>Settings</a> </li> <li> <a href="#"><i class="material-icons">videocam</i>Upload</a> </li> <li> <a href="#"><i class="material-icons">help</i>Help</a> </li> <li class="yoo-dropdown-cta"><a href="#">Sign Out</a></li> </ul> </div> </li> </ul> </div> </div> </div> </header> <div class="yoo-sidebarheader-toggle"> <div class="yoo-button-bar1"></div> <div class="yoo-button-bar2"></div> <div class="yoo-button-bar3"></div> </div> <div class="yoo-sidebarheader"> <div class="yoo-add"> <div class="yoo-add-in"> <a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template" class="yoo-add-thumb"> <img src="assets/img/MATERIAL-X-3.png" alt="MaterialXPro"> </a> <h2 class="yoo-add-title"><a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template">Go Pro & unlock 100+ more UI components & pages.</a></h2> <a target="_blank" href="https://yookits.com/product/materialx-material-bootstrap-admin-template" class="yoo-add-btn btn btn-success btn-sm">Show Me</a> </div> </div> <div class="yoo-sidebarheader-in" data-scrollbar> <div class="yoo-sidebar-nav"> <ul class="yoo-sidebar-nav-list yoo-mp0"> <li> <a href="index.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">dashboard</i></span> <span class="yoo-sidebar-link-text">Dashboard</span> </span> </a> </li> <li> <a href="settings.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">settings</i></span> <span class="yoo-sidebar-link-text">Profile Settings</span> </span> </a> </li> <li> <a href="calender.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">event_note</i></span> <span class="yoo-sidebar-link-text">Calender</span> </span> </a> </li> <li class="yoo-sidebar-has-children"> <a href="#" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">account_circle</i></span> <span class="yoo-sidebar-link-text">Sign In/Sign Up</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="login.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Log In</span> </span> </a> </li> <li> <a href="login.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Sign Up</span> </span> </a> </li> </ul> </li> <li> <a href="alerts.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">insert_drive_file</i></span> <span class="yoo-sidebar-link-text">Notifications</span> </span> </a> </li> <li class="active"> <a href="button.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">folder</i></span> <span class="yoo-sidebar-link-text">Buttons</span> </span> </a> </li> <li> <a href="tables.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">table_chart</i></span> <span class="yoo-sidebar-link-text">Table</span> </span> </a> </li> <li> <a href="forms.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">add_to_photos</i></span> <span class="yoo-sidebar-link-text">Forms</span> </span> </a> </li> <li> <a href="pagination.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">flag</i></span> <span class="yoo-sidebar-link-text">Pagination</span> </span> </a> </li> <li> <a href="typography.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">font_download</i></span> <span class="yoo-sidebar-link-text">Typography</span> </span> </a> </li> <li class="yoo-sidebar-has-children"> <a href="#" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">cloud</i></span> <span class="yoo-sidebar-link-text">Components</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="badge.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Badge</span> </span> </a> </li> <li> <a href="breadcrumb.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Breadcrumb</span> </span> </a> </li> <li> <a href="card.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Card</span> </span> </a> </li> <li> <a href="carousel.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Carousel</span> </span> </a> </li> <li> <a href="collapse.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Collapse</span> </span> </a> </li> <li> <a href="dropdowns.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Dropdowns</span> </span> </a> </li> <li> <a href="list-group.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">List Group</span> </span> </a> </li> <li> <a href="modal.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Modal</span> </span> </a> </li> <li> <a href="tooltips.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Tooltips</span> </span> </a> </li> </ul> </li> <li> <a href="icons.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">archive</i></span> <span class="yoo-sidebar-link-text">Icons</span> </span> </a> </li> <li> <a href="svgmaps.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">explore</i></span> <span class="yoo-sidebar-link-text">SVG Maps</span> </span> </a> </li> <li> <a href="documentation.html" data-ripple="ripple" data-ripple-color="#3f51ae"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon"><i class="material-icons">library_books</i></span> <span class="yoo-sidebar-link-text">Documentation</span> </span> </a> </li> </ul> </div> </div> </div> <div class="yoo-content yoo-style1"> <div class="container"> <div class="yoo-uikits-heading"> <ul class="yoo-breadcamb yoo-style1 yoo-mp0"> <li><a href="#">Home</a></li> <li>Buttons</li> </ul> <h2 class="yoo-uikits-title">Buttons</h2> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">Button tags</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#button-tags"><i class="material-icons">code</i></button>  <div class="modal fade" id="button-tags"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">General Card</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i class="material-icons">close</i> </button> </div> <div class="modal-body"> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Secondary<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">></span>Info<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-light"</span><span class="nt">></span>Light<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-dark"</span><span class="nt">></span>Dark<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-disabled"</span><span class="nt">></span>Disabled<span class="nt"></button></span> </code></pre></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="yoo-card-body"> <div class="yoo-padd-lr-20 yoo-alert-wrap"> <div class="yoo-height-b20 yoo-height-lg-b20"></div> <div class="kit-btns"> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-primary">Primary</button> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-secondary">Secondary</button> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-success">Success</button> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-danger">Danger</button> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-warning">Warning</button> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-info">Info</button> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-light">Light</button> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-disabled" disabled>Disabled</button> </div> <div class="yoo-height-b20 yoo-height-lg-b20"></div> </div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">Outline buttons</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#outline-tags"><i class="material-icons">code</i></button>  <div class="modal fade" id="outline-tags"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Outline buttons</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i class="material-icons">close</i> </button> </div> <div class="modal-body"> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(98, 0, 238, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(3, 218, 198, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">></span>Secondary<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(0, 200, 83, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span><span class="nt">></span>Success<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(213, 0, 0, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(255, 214, 0, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(0, 122, 255, 0.7)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">></span>Info<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(0, 0, 0, 0.3)"</span> <span class="na">class=</span><span class="s">"btn btn-outline-light"</span><span class="nt">></span>Light<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"rgba(0, 0, 0, 0.3"</span> <span class="na">class=</span><span class="s">"btn btn-outline-dark"</span><span class="nt">></span>Dark<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-disabled"</span> <span class="na">disabled</span><span class="nt">></span>Disabled<span class="nt"></button></span></code></pre></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="yoo-card-body"> <div class="yoo-padd-lr-20 yoo-alert-wrap"> <div class="yoo-height-b20 yoo-height-lg-b20"></div> <div class="kit-btns"> <button type="button" data-ripple="ripple" data-ripple-color="rgba(98, 0, 238, 0.7)" class="btn btn-outline-primary">Primary</button> <button type="button" data-ripple="ripple" data-ripple-color="rgba(3, 218, 198, 0.7)" class="btn btn-outline-secondary">Secondary</button> <button type="button" data-ripple="ripple" data-ripple-color="rgba(0, 200, 83, 0.7)" class="btn btn-outline-success">Success</button> <button type="button" data-ripple="ripple" data-ripple-color="rgba(213, 0, 0, 0.7)" class="btn btn-outline-danger">Danger</button> <button type="button" data-ripple="ripple" data-ripple-color="rgba(255, 214, 0, 0.7)" class="btn btn-outline-warning">Warning</button> <button type="button" data-ripple="ripple" data-ripple-color="rgba(0, 122, 255, 0.7)" class="btn btn-outline-info">Info</button> <button type="button" data-ripple="ripple" data-ripple-color="rgba(0, 0, 0, 0.3)" class="btn btn-outline-light">Light</button> <button type="button" data-ripple="ripple" data-ripple-color="rgba(0, 0, 0, 0.3" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-disabled" disabled>Disabled</button> </div> <div class="yoo-height-b20 yoo-height-lg-b20"></div> </div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">Large buttons</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#large-btn"><i class="material-icons">code</i></button>  <div class="modal fade" id="large-btn"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Large buttons</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i class="material-icons">close</i> </button> </div> <div class="modal-body"> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span></code></pre></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="yoo-card-body"> <div class="yoo-padd-lr-20 yoo-alert-wrap"> <div class="yoo-height-b20 yoo-height-lg-b20"></div> <div class="kit-btns"> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-primary btn-lg">Large button</button> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-secondary btn-lg">Large button</button> </div> <div class="yoo-height-b20 yoo-height-lg-b20"></div> </div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">Small buttons</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#small-btn"><i class="material-icons">code</i></button>  <div class="modal fade" id="small-btn"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Small buttons</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i class="material-icons">close</i> </button> </div> <div class="modal-body"> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span></code></pre></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="yoo-card-body"> <div class="yoo-padd-lr-20 yoo-alert-wrap"> <div class="yoo-height-b20 yoo-height-lg-b20"></div> <div class="kit-btns"> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-primary btn-sm">Small button</button> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-secondary btn-sm">Small button</button> </div> <div class="yoo-height-b20 yoo-height-lg-b20"></div> </div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">Block level button</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#block-level-button"><i class="material-icons">code</i></button>  <div class="modal fade" id="block-level-button"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Block level button</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i class="material-icons">close</i> </button> </div> <div class="modal-body"> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">ripple=</span><span class="s">"ripple"</span> <span class="na">ripple-color=</span><span class="s">"#fff"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span></code></pre></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="yoo-card-body"> <div class="yoo-padd-lr-20 yoo-alert-wrap"> <div class="yoo-height-b20 yoo-height-lg-b20"></div> <div class="kit-btns"> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-blue-gray btn-lg btn-block">Block level button</button> <button type="button" data-ripple="ripple" data-ripple-color="#fff" class="btn btn-secondary btn-lg btn-block">Block level button</button> </div> <div class="yoo-height-b20 yoo-height-lg-b20"></div> </div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="yoo-card yoo-style1"> <div class="yoo-card-heading"> <div class="yoo-card-heading-left"> <h2 class="yoo-card-title">Checkbox and radio buttons</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#checkbox-radio-buttons"><i class="material-icons">code</i></button>  <div class="modal fade" id="checkbox-radio-buttons"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Checkbox and radio buttons</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i class="material-icons">close</i> </button> </div> <div class="modal-body"> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary active"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span> Checked <span class="nt"></label></span> <span class="nt"></div></span></code></pre></div> <br> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">></span> <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary active"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option1"</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="na">checked</span><span class="nt">></span> Active <span class="nt"></label></span> <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option2"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span> Radio <span class="nt"></label></span> <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option3"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span> Radio <span class="nt"></label></span> <span class="nt"></div></span></code></pre></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="yoo-card-body"> <div class="yoo-padd-lr-20 yoo-alert-wrap"> <div class="yoo-height-b20 yoo-height-lg-b20"></div> <div class="btn-group-toggle" data-toggle="buttons"> <label class="btn btn-outline-primary active" data-ripple="ripple" data-ripple-color="rgba(98, 0, 238, 0.7)"> <input type="checkbox" checked > Checked </label> </div> <div class="yoo-height-b10 yoo-height-lg-b10"></div> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-outline-primary active" data-ripple="ripple" data-ripple-color="rgba(98, 0, 238, 0.7)"> <input type="radio" name="options" id="option1" checked> Active </label> <label class="btn btn-outline-primary" data-ripple="ripple" data-ripple-color="rgba(98, 0, 238, 0.7)"> <input type="radio" name="options" id="option2" > Radio </label> <label class="btn btn-ou