<!-- Primary/ Secondary Button --> <button class="btn btn-primary">Primary Button</button> <button class="btn btn-secondary">Secondary Button</button> <!-- Link Button --> <button class="btn btn-primary-link"> <a href="">Primary Link Button</a> </button> <button class="btn btn-secondary-link"> <a href="">Secondary Link Button</a> </button> <!-- Icon Button --> <button class="btn btn-primary-icon btn-flex"> <span class="material-icons"> account_circle </span> Primary Icon Button </button> <button class="btn btn-secondary-icon btn-flex"> <span class="material-icons"> notifications </span> Secondary Icon Button </button> <!-- Floating Action Button --> <button class="btn btn-float"> <span class="material-icons"> add </span> </button> <button class="btn btn-float"> <span class="material-icons"> arrow_upward </span> </button>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter