<link href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="section"> <h1 class="page-title has-text-centered"> Awesome Button Style in Bulma </h1> <div class="container columns"> <div class="column is-half"> <h3 class="sub-title has-text-weight-bold">Defaut Button</h3> <hr> <a class="button">Default Button</a> <button class="button">Default Button</button> <br> <h3 class="sub-title has-text-weight-bold">Colored Button</h3> <hr> <a class="button is-primary">Primary Button</a> <a class="button is-info">Info Button</a> <button class="button is-success">Success Button</button> <button class="button is-warning">Warning Button</button> <button class="button is-danger">Danger Button</button> </div> <div class="column is-half"> <h3 class="sub-title has-text-weight-bold">Button Sizes</h3> <hr> <a class="button is-small">Small Button</a> <button class="button is-medium">Medium Button</button> <button class="button is-large">Large Button</button> <br> <h3 class="sub-title has-text-weight-bold">Other Important Button Styles and States</h3> <hr> <a class="button is-primary is-outlined">Outlined Button</a> <a class="button is-info is-loading">Laoding Button</a> <button class="button is-success" disabled>Disabled Button</button> </div> </div> </section>

.page-title{ font-size:35px; } .sub-title{ font-size: 25px; color: #23d160; padding-top: 15px; } hr{ margin: 0.4rem 0; } .button{ margin-bottom: 10px; }