Change the Button Background Colors - Aaron Meyers

Change the Button Background Color

By default SmugMug sets the background color of your buttons to the accented color of your page. If you would like to customize the button color, you can use the following code. Some examples of buttons are the "Buy Now", "Add to Cart", or the "Slideshow" buttons. Add the following CSS to your theme's Advanced CSS settings:

Default Button Color

/* Set the buttons to transition grey on mouse hover */
.sm-user-ui .sm-button-skin-accent {
  background-color: orange;
  border-color: #000000;
}

Button Hover Color

/* Set the buttons to transition grey on mouse hover */
.sm-user-ui .sm-button-skin-accent:hover {
  background-color: grey;
  border-color: grey;
}

/* Set the buttons to transition to the hover color slowly. 
    Feel free to remove this if you don't want the slow transition.  */
.sm-user-ui .sm-button-skin-accent {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}

Comments

Powered by SmugMug Log In