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
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.