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;}