Button

Standard Button

View Code
<!-- Button -->
<button type="button" class="btn btn-ms btn-indigo">
    Button
</button>
<!-- Button with Ripple effect -->
<button type="button" class="btn btn-ms btn-indigo ripple">
    Button
</button>
<!-- Disabled Button -->
<button type="button" class="btn btn-ms btn-indigo" disabled>
    Button
</button>

Buttons with icon

View Code
<!-- Button -->
<button type="button" class="btn btn-ms btn-indigo">
    Like <i class="material-icons">thumb_up</i>
</button>
<!-- Button with Ripple effect -->
<button type="button" class="btn btn-ms btn-indigo ripple">
    Like <i class="material-icons">thumb_up</i>
</button>
<!-- Disabled Button -->
<button type="button" class="btn btn-ms btn-indigo" disabled>
    Like<i class="material-icons">thumb_up</i>
</button>

Flat Buttons

View Code
<!-- Flat Button -->
<button type="button" class="btn btn-ms btn-flat btn-indigo">
    Button
</button>
<!-- Flat Button with Ripple effect -->
<button type="button" class="btn btn-ms btn-flat btn-indigo ripple">
    Button
</button>
<!-- Disabled Flat Button -->
<button type="button" class="btn btn-ms btn-flat btn-indigo" disabled>
    Button
</button>

Outline Buttons

View Code
<!-- Outline Button -->
<button type="button" class="btn btn-ms btn-outline-indigo">
    Button
</button>
<!-- Outline Button with Ripple effect -->
<button type="button" class="btn btn-ms btn-outline-indigo ripple">
    Button
</button>
<!-- Disabled Outline Button -->
<button type="button" class="btn btn-ms btn-outline-indigo" disabled>
    Button
</button>

Flat Outline Buttons

View Code
<!-- Flat Outline Button -->
<button type="button" class="btn btn-ms btn-flat btn-outline-indigo">
    Button
</button>
<!-- Flat Outline Button with Ripple effect -->
<button type="button" class="btn btn-ms btn-flat btn-outline-indigo ripple">
    Button
</button>
<!-- Disabled Flat Outline Button -->
<button type="button" class="btn btn-ms btn-flat btn-outline-indigo" disabled>
    Button
</button>

File Upload Button

View Code
<!-- File upload button -->
<div class="ms-file-input-wrapper">
    <input type="file" name="myfile">
    <button type="button" class="btn btn-ms btn-indigo file-upload-button">
        <i class="material-icons">attach_file</i> Browse
    </button>
    <label class="files"></label>
</div>
<!-- Multiple file upload button -->
<div class="ms-file-input-wrapper">
    <input type="file" name="myfiles[]" multiple>
    <button type="button" class="btn btn-ms btn-indigo file-upload-button">
        <i class="material-icons">attach_file</i> Browse
    </button>
    <label class="files"></label>
</div>

Button Groups

View Code
<!-- Button Group -->
<div class="btn-group">
    <button type="button" class="btn btn-ms btn-indigo">Button</button>
    <button type="button" class="btn btn-ms btn-indigo">Button</button>
</div>
<!-- Button Group with Ripple effect -->
<div class="btn-group">
    <button type="button" class="btn btn-ms btn-indigo ripple">Button</button>
    <button type="button" class="btn btn-ms btn-indigo ripple">Button</button>
</div>
<!-- Disabled Button Group -->
<div class="btn-group">
    <button type="button" class="btn btn-ms btn-indigo" disabled>Button</button>
    <button type="button" class="btn btn-ms btn-indigo" disabled>Button</button>
</div>

Vertical Button Groups

View Code
<!-- Vertical Button Group -->
<div class="btn-group-vertical">
    <button type="button" class="btn btn-ms btn-indigo">Button</button>
    <button type="button" class="btn btn-ms btn-indigo">Button</button>
</div>
<!-- Vertical Button Group with Ripple effect -->
<div class="btn-group-vertical">
    <button type="button" class="btn btn-ms btn-indigo ripple">Button</button>
    <button type="button" class="btn btn-ms btn-indigo ripple">Button</button>
</div>
<!-- Disabled Vertical Button Group -->
<div class="btn-group-vertical">
    <button type="button" class="btn btn-ms btn-indigo" disabled>Button</button>
    <button type="button" class="btn btn-ms btn-indigo" disabled>Button</button>
</div>