Home>Support>Change button lay out

Change button lay out

By jvanbavel, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi there

The buttons for email, webshop etc are grey with a bounding box and shadow

I would like to take away the shadows around the buttons in the site, make the button look ‘flat’
All buttons.
Or is there an option to select other buttons somewhere.

I have found this code in the inspect element window but that is only for the email button ???

Thanks for helping out

.widget img, .widget iframe, .widget object, .widget select, .widget input {
    max-width: 100%;
}
a.button, button, html input[type=”button”], input[type=”reset”], input[type=”submit”] {
    padding: 12px 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #D2D2D2 #C3C3C3 #9F9F9F;
    background: transparent -moz-linear-gradient(center bottom , #DFDFDF 0%, #FFF 100%) repeat scroll 0% 0%;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    color: #646464;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.125), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
    width: auto;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);

URL: http://dutchnaturalista.com/product/happy-hair-mix/

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

  1. 9 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Jvanbavel

    This might take more effort than it initially appears. Each rule in the existing buttons needs to be overwritten with a new rule. So for example if there is a border we need to say, no border etc. I’ve got a snippet ready for most WooCommerce buttons:

    /* Remove Vantage WooCommerce Button Styling */

.woocommerce #page-wrapper .button, input[type="submit"] .wpcf7-submit {
background: #000; /* Set this to your button background color */	
  border-top: initial;
  border-left: initial;
  border-right: initial;
  border-bottom: initial;
color: #fff !important;
cursor: pointer
  filter: initial;
  -webkit-border-radius: initial;
  -moz-border-radius: initial;
  border-radius: initial;
  -webkit-box-shadow: initial;
  -moz-box-shadow: initial;
  box-shadow: initial;
  width: initial;
  text-decoration: initial;
  /* Improves usability and consistency of cursor style between image-type 'input' and others */
  cursor: initial;
  /* Corrects inability to style clickable 'input' types in iOS */
  -webkit-appearance: none;
  line-height: initial;
  text-shadow: initial;
}

.woocommerce .button.alt,
.woocommerce .button.alt:hover {
  background: none !important;
  background-color: #9d6fce !important; /* Set this to your button background color */
  border: none !important;
}

    Note the comments that need to be changed to set the background color as required. As you can see, not a quick fix :)

  2. 9 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Here are the default button rules:

    a.button,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  padding: 12px 20px;
  border-top: solid 1px #d2d2d2;
  border-left: solid 1px #c3c3c3;
  border-right: solid 1px #c3c3c3;
  border-bottom: solid 1px #9f9f9f;
  background: #ffffff;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfdfdf), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #dfdfdf, #ffffff);
  background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #ffffff 100%);
  background: -o-linear-gradient(#ffffff, #dfdfdf);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf', GradientType=0);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  color: #646464;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  width: auto;
  text-decoration: none;
  /* Improves usability and consistency of cursor style between image-type 'input' and others */
  cursor: pointer;
  /* Corrects inability to style clickable 'input' types in iOS */
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
a.button:focus,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
  /* Button hover style */
  border-top: solid 1px #dadada;
  border-left: solid 1px #cfcfcf;
  border-right: solid 1px #cfcfcf;
  border-bottom: solid 1px #a8a8a8;
  background: #ffffff;
  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);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=0);
}
a.button:active,
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
  /* Button click style */
  border-top: solid 1px #aaaaaa;
  border-left: solid 1px #bbbbbb;
  border-right: solid 1px #bbbbbb;
  border-bottom: solid 1px #bbbbbb;
  -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}

    Perhaps take a look at what I did to override the WooCommerce button styling. You could look at doing that with the above rules.

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