Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in

MDW WordPress Tutorial Buttons


Written by Michał Krawczyk ,

Of course - you can use standard buttons. But buttons in the Material Design style are simply better. Outline, Rounded, Floating, Flat, all kind in a variety of colors and sizes. Take a look at the list below and go directly to the buttons you're interested in, or browse all of them:

  1. Usage
  2. Hyperlink
  3. Size
  4. Color
  5. Outline buttons
  6. Rounded buttons
  7. Rounded outline buttons
  8. Buttons with icons
  9. Floating
  10. Flat buttons


In order to use button in your post/page/product use shortcode [button]Text[/button]



You can also specify the button size using size parameter within shortcode [button size="large"]Text[/button]



[button size="large"]Text[/button]
[button size="small"]Text[/button]
[button size="block"]Text[/button]


It is possible to specify where button will redirect using color parameter within shortcode [button color="buttonType"]Text[/button]

Basic colors:


<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
[button color="primary"]Primary[/button]

<!-- Indicates a dangerous or potentially negative action -->
[button color="default"]Primary[/button]

<!-- Secondary, outline button -->
[button color="secondary"]Secondary[/button]

<!-- Indicates a successful or positive action -->
[button color="success"]Success[/button]

<!-- Contextual button for informational alert messages -->
[button color="info"]Info[/button]

<!-- Indicates caution should be taken with this action -->
[button color="warning"]Warning[/button]

<!-- Indicates a dangerous or potentially negative action -->
[button color="danger"]Danger[/button]


Converting context to assistive technologies

If you use color to add some meaning to a button, it only provides a visual indication. However, it won't be conveyed to the users of assistive technologies (like screen readers). You have to be convinced that info denoted by the color is either well-understand (basing on the content -visibility of the text on the button) or is included through alternative means, like additional text hidden with the .sr-only class.

Outline buttons

To make button outlined set outline parameter to true within shortcode [button outline="true"]Text[/button]

[button color="primary" outline="true"] Primary[/button]
[button color="default" outline="true"] Default [/button]
[button color="secondary" outline="true"] Secondary [/button]
[button color="success" outline="true"] Success[/button]
[button color="info" outline="true"] Info [/button]
[button color="warning" outline="true"] Warning [/button]
[button color="danger" outline="true"] Danger [/button]

Rounded buttons

To make button rounded set rounded parameter to true within shortcode [button rounded="true"]Text[/button]

Primary Default Secondary Success Info Warning Danger

[button color="primary" rounded="true"] Primary[/button]
[button color="default" rounded="true"] Default [/button]
[button color="secondary" rounded="true"] Secondary [/button]
[button color="success" rounded="true"] Success[/button]
[button color="info" rounded="true"] Info [/button]
[button color="warning" rounded="true"] Warning [/button]
[button color="danger" rounded="true"] Danger [/button]

Rounded outline buttons

It is possible to combine rounded and outline parameters to achieve phenomenal effect below:
Simply use [button outline="true" rounded="true"]Text[/button]

Primary Default Secondary Success Info Warning Danger

[button color="primary" rounded="true" outline="true"] Primary [/button]
[button color="default" rounded="true" outline="true"]  Default [/button]
[button color="secondary" rounded="true" outline="true"] Secondary [/button]
[button color="success" rounded="true" outline="true"] Success[/button]
[button color="info" rounded="true" outline="true"] Info [/button]
[button color="warning" rounded="true" outline="true"] Warning [/button]
[button color="danger" rounded="true" outline="true"] Danger [/button]

Buttons with icons

You can also display icons on your buttons (except for text). All you need to do is to add the following code <i class="fa fa-icon left"></i> and replace fa-icon with one of more than 600 icons available for your here.

You can use it on left <i class="fa fa-magic left"></i> Left


or right side of the text Right <i class="fa fa-magic right"></i>


[button color="primary" ] <i class="fa fa-magic left"></i> Left  [/button]
[button color="primary" ] Right <i class="fa fa-magic right"></i> [/button]

Floating buttons

See the full list of available icons for your buttons.

[button type="floating" color="blue" size="large"] <i class="fa fa-bolt"> </i>[/button]
[button type="floating" color="green"]<i class="fa fa-star"></i>[/button]

Flat button

It is simply a button without a color fulfillment or any outline.

[button flat="true"]Click me[/button]


It is recommended to paste the copied code into the "Text" area. Otherwise, the shortcode may not work properly. If you copy the code into "Visual" area, it may contain additional operators, which might break the button.

Do you want to share?

About author

User avatar

Michał Krawczyk

Digital Marketing Analyst at MDW with a strong Research background, student of Interfaculty Individual Studies in the Humanities at the Jagiellonian University

Leave a reply

Card image cap

Stay up to date

Subscribe to our newsletter

Rapid change in the world of web development is its inseparable quality. New updates and features are being constantly released, almost every week. Don't forget to be up to date.