Home>Support>SiteOrigin Button Widget

SiteOrigin Button Widget

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi,

I would like to ask what is the default css configuration for the button used in the widget? I know I can change and customize, but I would like to grab the default css for that button.

As I might guess, with the customizations, the default css gets updated accordingly.

Thanks,
Bilal

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, 6 months ago Alex S
    Hi, I Work Here

    Hi Bilal,

    The default button CSS is:

    .so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a {
      -ms-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 1em;
      padding: 1em 2em;
      background: #41a9d5;
      background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#298fba),color-stop(1,#41a9d5));
      background: -ms-linear-gradient(bottom,#298fba,#41a9d5);
      background: -moz-linear-gradient(center bottom,#298fba 0%,#41a9d5 100%);
      background: -o-linear-gradient(#41a9d5,#298fba);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#41a9d5', endColorstr='#298fba', GradientType=0);
      border: 1px solid;
      border-color: #2685ad #247fa5 #227598 #247fa5;
      color: #FFFFFF !important;
      -webkit-border-radius: 0.25em;
      -moz-border-radius: 0.25em;
      border-radius: 0.25em;
      -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065);
      -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065);
      text-shadow: 0 1px 0 rgba(0,0,0,0.05);
    }
    .so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a .sow-icon-image,
    .so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a [class^="sow-icon-"] {
      margin: -0.1em 0.75em -0.2em -0.75em;
    }
    .so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a:visited,
    .so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a:active,
    .so-widget-sow-button-atom-d0a8a77b6f79 .ow-button-base a:hover {
      color: #FFFFFF !important;
    }
    .so-widget-sow-button-atom-d0a8a77b6f79-button-base a.ow-button-hover:hover {
      background: #49add7;
      background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#2b95c2),color-stop(1,#49add7));
      background: -ms-linear-gradient(bottom,#2b95c2,#49add7);
      background: -moz-linear-gradient(center bottom,#2b95c2 0%,#49add7 100%);
      background: -o-linear-gradient(#49add7,#2b95c2);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#49add7', endColorstr='#2b95c2', GradientType=0);
      border-color: #288cb6 #2685ad #247ca1 #2685ad;
      color: #ffffff;
    }
    

    You will need to replace so-widget-sow-button-atom-d0a8a77b6f79 with a unique identifier for the button – such as a widget class, as the above CSS will not work without doing so.

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