How to Add Custom CSS Buttons to WordPress as a Shortcode?

3 Views

How do I add custom CSS buttons as a shortcode like this:

[button class=”mybutton1″ link=”home”]

Read More

I have the CSS of the button from here 

.myButton {

    -moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
    -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
    box-shadow:inset 0px 1px 0px 0px #cf866c;

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
    background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0);

    background-color:#d0451b;

    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;

    border:1px solid #942911;

    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:13px;
    font-weight:normal;
    padding:6px 24px;
    text-decoration:none;

    text-shadow:0px 1px 0px #854629;

}
.myButton:hover {

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
    background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0);

    background-color:#bc3315;
}
.myButton:active {
    position:relative;
    top:1px;
}

I wish to add this to my WordPress site as a shortcode. How do I do this?

Thanks!

Post Views: 3

Related posts

1 comment 

  1. function myButton($atts, $content = ''){    

    extract(shortcode_atts(array(
        'text' => '',
        'link' => ''
    ), $atts)); 

    $html = '<a href="' . $link . '"><div class="myButton">' . $text . '</div></a>';
    return $html;    
}

add_shortcode('mybutton', 'myButton');

    Add this to your functions.php and you will be able to call the button within wordpress using the shortcode you wanted.

    As you can see the class and the link you set become the variables to be used in the shortcode.

    If you want to add text to the button you could change the html to the following:

    $html = '<a href="' . $link . '"><div class="' . $class . '" >' . $content . '</div></a>';

    and use it like this

    [button class='mybutton' link='home']mybuttonname[/button]

    Hope this helps

Comments are closed.