Turn your Login|Register, Cart and Print Icons into Buttons

Follow

This article gives you the CSS needed to change your icons into buttons.

 

1. Copy the entire CSS code at the bottom of this article and paste it in the Custom CSS box, in the Appearance section, of your widget's control panel. An example is below.

 

2. Customize your button by adjusting the CSS. Here are ways you can customize your button:

  • Change the "background" color to match your website. You can type the name of the color or use hex codes for more specific shades.
  • Change "color" to adjust the color of the text
  • Change "content" to adjust what the button says
  • Change the font style

 

3. Save the widget

 

CSS Code

/* Building the button My Account*/
div.healcode a.my_account_version {
background:#EDEDED;
padding: 6px 10px;
border-radius:5px;
}

/* Button hover change My Account*/
div.healcode a.my_account_version:hover {
background: #d6d6d6;
}

/* Styling the current My Account Link */
div.healcode a.action_icon .action_text.my_account_text {
color: #4E5B65;
font-size: 9px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: normal;
}

/* Building the button Cart*/
div.healcode a.cart_version {
background:#EDEDED;
padding: 6px 10px;
border-radius:5px;
}

/* Button hover change Cart*/
div.healcode a.cart_version:hover {
background: #d6d6d6;
}

/* Styling content in button Cart*/
div.healcode a.cart_version:before {
content: "CART";
color: #4E5B65;
font-size: 9px;
font-weight: normal;
letter-spacing: 1px;
}

/* Removing the icon Cart*/
div.healcode a.cart_version img {
display: none;
}

/* Building the button Print*/
div.healcode a.print_version {
background:#EDEDED;
padding: 6px 10px;
border-radius:5px;
}
/* Button hover change Print*/
div.healcode a.print_version:hover {
background: #d6d6d6;
}

/* Styling content in button Print*/
div.healcode a.print_version:before {
content: "PRINT";
color: #4E5B65;
font-size: 9px;
font-weight: normal;
letter-spacing: 1px;
}

/* Removing the icon Print*/
div.healcode a.print_version img {
display: none;
}

/* Hide the header line */
div.healcode .header h1 {
border-bottom: 0px;
}

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk