Dynamic Styles - Changing Button Colors

The out-of-box theme has four link/button styles

Sample HTML to change the Link / Button Colors

The HTML below will make the following adjustments to the header colors:

  • Primary Button Text, and Secondary Button Background to white (#ffffff)
  • Primary Button Background, and Secondary Button text to Red (#e81C2d)

/* Change the button Colors */

.cart-btn {background-color: #e81C2d; color: #ffffff;  border-color: #ffffff; border-radius: 4px;}

.cart-btn:hover {background-color: #fffffffff;  border-color: #e81C2d; color: #e81C2d;   border-radius: 4px;  border: 1px solid;}

.btn-primary {background: #e81C2d; border-color: #e81C2d; color:#ffffff;}

.btn-primary:hover {background: #ffffff; border-color: #e81C2d; color: #e81C2d !important;}

.btn-secondary {background: #ffffff; border-color: #e81C2d; color:#e81C2d;}

.btn-secondary:hover {background: #e81C2d; border-color: #e81C2d; color: #ffffff !important;}

.btn-quick-view {background: #e81C2d ;border-color: #e81C2d; color:#ffffff;}

.btn-quick-view:hover {background: #ffffff; border-color: #e81C2d; color: #e81C2d;}

.header .nav-header .my-accounts-nav .log-off {color: #e81C2d;}

.AddToCartBlock .cart-notify-bar .z-mini-cart .btn-cart {background: #ffffff; border-color: #e81C2d !important; color:#e81C2d !important;}

.AddToCartBlock .cart-notify-bar .z-mini-cart .btn-cart:hover {background: #e81C2d; border-color: #e81C2d; color: #ffffff !important;}

header .header .my-accounts-nav .dropdown-item.active, header .header .my-accounts-nav .dropdown-item:active {background-color: #e81C2d;}

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.