Vantage Buttons – Prefer to use my own rather than the drop-down options, but how?

Hi Eran

Give our new Button widget a try. You’ll find it contained in our Widget Bundle plugin: http://wordpress.org/plugins/so-widgets-bundle/. It’s customisable in the way you’re looking for.

Hope that helps.

If you use the SiteOrigin Call to Action widget, part of the Widget Bundle: https://wordpress.org/plugins/so-widgets-bundle/. You can set button and text color.

Here are a set of selectors for the button you have that you can customise:

.origin-widget.origin-widget-button-vantage_flat-dark_green a {
    display:inline-block;
    padding:11px 45px 10px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    color:#FFF;
    font-size:1em;
    font-family:inherit;
    font-weight:500;
    text-decoration:none;
    text-shadow:0 1px 0 #009837;
    text-align:center;
    border-bottom:2px solid #009E3C;
    background:#00b450;
    background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#00B34F),color-stop(1,#06B551));
    background:-ms-linear-gradient(bottom,#00B34F,#06B551);
    background:-moz-linear-gradient(center bottom,#00B34F 0%,#06B551 100%);
    background:-o-linear-gradient(#06B551,#00B34F)
}

.origin-widget.origin-widget-button-vantage_flat-dark_green a:hover {
    background:#15BA55;
    background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#00AE4B),color-stop(1,#15BA55));
    background:-ms-linear-gradient(bottom,#00AE4B,#15BA55);
    background:-moz-linear-gradient(center bottom,#00AE4B 0%,#15BA55 100%);
    background:-o-linear-gradient(#15BA55,#00AE4B)
}

.origin-widget.origin-widget-button-vantage_flat-dark_green a:active {
    background:#00AC48;
    background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#00AC48),color-stop(1,#00b450));
    background:-ms-linear-gradient(bottom,#00AC48,#00b450);
    background:-moz-linear-gradient(center bottom,#00AC48 0%,#00b450 100%);
    background:-o-linear-gradient(#00b450,#00AC48);
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
    padding-top:12px;
    padding-bottom:9px
}