Home>Support>Use shortcodes with Button (PB)?

Use shortcodes with Button (PB)?

By Brandon Wolfe, 8 years ago. Last reply by Andrew Misplon, 8 years ago.

Hello,

Is it possible when using the button (PB) widget in page builder to have it point to a shortcode instead of a web URL? custom CSS to do this or is there another product you offer than can do this?

Thank you for your assistance!

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Brandon

    Unfortunately, not as far as I know. As an alternative you could trying using a Text widget and inserting something like:

    <a href="[anythingpopup id="29"]">Button Text</a>
  2. 8 years, 10 months ago Brandon Wolfe

    I will def give that a try… i just like the crisp look of your button so was hoping there was a way to do this. shouldnt be too difficult to implement that into the interface.

  3. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    If possible, send a link to a page with the button you like and I’ll grab the markup for you to paste into a Text widget.

  4. 8 years, 10 months ago Brandon Wolfe

    link to the page is http://sportsgeekfantasy.com/nfl-h2h-fantasy-2 as you can see the "league rules" button is the widget in page builder and looks much better, you can tell a much bigger different on mobile devices if your able to view on one

  5. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Try this in a Text widget:

    <a href="[anythingpopup id="29"]" class="custom-white-button">Button Text</a>

    To add styling, add the following to Appearance > Custom CSS:

    /* Custom Button */

.custom-white-button {
    display: inline-block;
    padding: 10px 45px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #7B7B7B;
    font-size: 0.875em;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF;
    text-align: center;
    -webkit-box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    background: #F5F5F5;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#EBEBEB),color-stop(1,#FFFFFF));
    background: -ms-linear-gradient(bottom,#EBEBEB,#FFFFFF);
    background: -moz-linear-gradient(center bottom,#EBEBEB 0%,#FFFFFF 100%);
    background: -o-linear-gradient(#FFFFFF,#EBEBEB);
    border-top: solid 1px #CDCDCD;
    border-left: solid 1px #C2C2C2;
    border-right: solid 1px #C2C2C2;
    border-bottom: solid 1px #B7B7B7;
    min-width: 202px;
}

.custom-white-button:hover {
    background: #FAFAFA;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#F0F0F0),color-stop(1,#FFFFFF));
    background: -ms-linear-gradient(bottom,#F0F0F0,#FFFFFF);
    background: -moz-linear-gradient(center bottom,#F0F0F0 0%,#FFFFFF 100%);
    background: -o-linear-gradient(#FFFFFF,#F0F0F0);
    border-top: solid 1px #D2D2D2;
    border-left: solid 1px #C7C7C7;
    border-right: solid 1px #C7C7C7;
    border-bottom: solid 1px #BCBCBC;
}

    Check this declaration out:

    min-width: 202px;

    See it above. You can adjust that value as required. I’ve inserted this so you don’t need to insert multiple spaces to wide the button.

  6. 8 years, 10 months ago Brandon Wolfe

    Hey Andrew!

    Thank you first off all for your help, its much appreciated!

    Plugged that in and button looks great, however it directs it to a url instead of the popup… try the button yourself and then try one of the ones above it.

    also on the mobile version its just showing text and still redirecting to a url.

  7. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Almost there. I hadn’t used this plugin before. Checked it all out now.

    Change the HTML to:

    <div class="custom-white-button">
[AnythingPopup id="1"]
</div>

    With your shortcode ID instead of mine.

    Change your Custom CSS to:

    .custom-white-button {
    display: inline-block;
    padding: 10px 45px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #7B7B7B;
    font-size: 0.875em;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF;
    text-align: center;
    -webkit-box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    background: #F5F5F5;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#EBEBEB),color-stop(1,#FFFFFF));
    background: -ms-linear-gradient(bottom,#EBEBEB,#FFFFFF);
    background: -moz-linear-gradient(center bottom,#EBEBEB 0%,#FFFFFF 100%);
    background: -o-linear-gradient(#FFFFFF,#EBEBEB);
    border-top: solid 1px #CDCDCD;
    border-left: solid 1px #C2C2C2;
    border-right: solid 1px #C2C2C2;
    border-bottom: solid 1px #B7B7B7;
    min-width: 202px;
}

.custom-white-button a {
  color: #7B7B7B;
  text-decoration: none;
}

.custom-white-button:hover {
    background: #FAFAFA;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#F0F0F0),color-stop(1,#FFFFFF));
    background: -ms-linear-gradient(bottom,#F0F0F0,#FFFFFF);
    background: -moz-linear-gradient(center bottom,#F0F0F0 0%,#FFFFFF 100%);
    background: -o-linear-gradient(#FFFFFF,#F0F0F0);
    border-top: solid 1px #D2D2D2;
    border-left: solid 1px #C7C7C7;
    border-right: solid 1px #C7C7C7;
    border-bottom: solid 1px #BCBCBC;
}

.custom-white-button a:hover {
  color: #7B7B7B;
  text-decoration: none;
}

    Try that and then let me know if you want any tweaks like font size or spacing etc.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More