Button Shortcode

<style>
.intense.btn { margin: 3px; }
.intense.btn.nomargin { margin: 0 3px; }
</style>
[intense_content_section]
<h2>Introduction</h2>
The button shortcode adds a clickable button to your WordPress website. Buttons can be used to redirect the user to another part of your site or to another site completely. There are many options to change the style of the button such as: rounding the corners, adding a gradient, changing the color, adding a 3D effect, and more.

[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Styling</h2>
Choose from an unlimited number of colors.
[intense_button color="muted"]Muted[/intense_button] [intense_button color="primary"]Primary[/intense_button] [intense_button color="info"]Info[/intense_button] [intense_button color="success"]Success[/intense_button]
[intense_button color="warning"]Warning[/intense_button] [intense_button color="error"]Error[/intense_button] [intense_button color="inverse"]Inverse[/intense_button] [intense_button color="#AC1D1C"]#AC1D1C[/intense_button] [intense_button color="#FACADE"]#FACADE[/intense_button] [intense_button color="Jade"]Jade[/intense_button] [intense_button color="Lavender"]Lavender[/intense_button]

[intense_spacer height="25"]
Round the corners by setting the border radius. Use the standard CSS border-radius styling.

[intense_button size="large" color="primary" border_radius="5"]Radius 5px[/intense_button] [intense_button size="large" color="warning" border_radius="3"]Radius 3px[/intense_button] [intense_button size="large" color="info" border_radius="30"]Radius 30px[/intense_button][intense_button size="large" color="success" border_radius="20px 0 20px 0"]Radius 20px 0 20px 0[/intense_button]

[intense_spacer height="25"]
Add a 3D effect with eight different angles to choose from. You can also set the size of the 3D effect. The most common 3D angle is 270°.

[intense_button size="medium" color="primary" angle_3d="0" border_radius="5"]3D Button - 0°[/intense_button] [intense_button size="medium" color="primary" angle_3d="45" border_radius="5"]3D Button - 45°[/intense_button] [intense_button size="medium" color="primary" angle_3d="90" border_radius="5"]3D Button - 90°[/intense_button] [intense_button size="medium" color="primary" angle_3d="135" border_radius="5"]3D Button - 135°[/intense_button] [intense_button size="medium" color="primary" angle_3d="180" border_radius="5"]3D Button - 180°[/intense_button] [intense_button size="medium" color="primary" angle_3d="225" border_radius="5"]3D Button - 225°[/intense_button] [intense_button size="medium" color="primary" angle_3d="270" border_radius="5"]3D Button - 270°[/intense_button] [intense_button size="medium" color="primary" angle_3d="315" border_radius="5"]3D Button - 315°[/intense_button] [intense_button angle_3d="270" border_radius="5" size_3d="5" size="medium" color="#999"]3D Size - 5[/intense_button]

[intense_spacer height="25"]
Add a colored gradient.

[intense_button gradient="1" border_radius="2" color="muted"]Gradient[/intense_button] [intense_button color="primary" gradient="1" border_radius="2"]Gradient[/intense_button] [intense_button color="info" gradient="1" border_radius="2"]Gradient[/intense_button] [intense_button color="success" gradient="1" border_radius="2"]Gradient[/intense_button] [intense_button color="warning" gradient="1" border_radius="2"]Gradient[/intense_button] [intense_button color="error" gradient="1" border_radius="2"]Gradient[/intense_button] [intense_button color="inverse" gradient="1" border_radius="2"]Gradient[/intense_button]

[intense_spacer height="25"]
Control the hover color by setting the amount to lighten or darken the button.

[intense_button hover_brightness="-50"]Darken by 50 steps[/intense_button]
[intense_button hover_brightness="50"]Lighten by 50 steps[/intense_button]

[/intense_content_section]
[intense_content_section]
<h2>Sizes</h2>
There are five different pre-defined sizes to choose from.
[intense_button size="mini" color="#999"]Mini[/intense_button] [intense_button size="small" color="#999"]Small[/intense_button] [intense_button color="#999"]Default[/intense_button] [intense_button size="medium" color="#999"]Medium[/intense_button] [intense_button size="large" color="#999"]Large[/intense_button]

You can also make a button bigger by adding padding. Padding can be added to each side independently. Sometimes padding is added to a button to make it visually closer to the size of other buttons next to it. Other times it is added to emphasize the button.

[intense_button size="large" color="#999" padding_top="50" padding_bottom="50" padding_left="50" padding_right="50"]A large button with lots of padding[/intense_button]

Sometimes you may need a button to span the width of its container. For this, you can use block level buttons.

[intense_row padding_top="0"]
[intense_column size="5" medium_size="5"]
[intense_alert color="#ddd"]
Notice how these buttons take the full width of this alert box.
[intense_button block="1" color="#999"]A block level button[/intense_button]
[intense_button block="1" color="#999"]Another block level button[/intense_button]
[intense_button block="1" color="#999"]And another[/intense_button]
[intense_spacer height="5"]
[intense_button block="1" color="#999" class="nomargin"]All together[/intense_button]
[intense_button block="1" color="#999" class="nomargin"]Block level button[/intense_button]
[intense_button block="1" color="#999" class="nomargin"]Last one[/intense_button]
[/intense_alert][/intense_column]
[intense_column size="3" medium_size="3"][/intense_column]
[intense_column size="4" medium_size="4"][/intense_column]
[/intense_row]

[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Icons</h2>
Add an icon to the left or right of the button. This can also be useful without any text.

[intense_button size="large" color="success" icon="heart"]Icon Left[/intense_button] [intense_button size="large" icon="exclamation" color="error" icon_position="right"]Icon Right[/intense_button]
[intense_button size="large" icon="chevron-down" icon_position="right"][/intense_button]
[/intense_content_section]
[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]