Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@makfruit
Last active April 25, 2021 20:48
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save makfruit/5253948 to your computer and use it in GitHub Desktop.
Save makfruit/5253948 to your computer and use it in GitHub Desktop.
A CSS snippet for Ecwid to alter buy now buttons. The button CSS styles is from this list: http://hellohappy.org/css3-buttons/ ('Shiny blue')
/*
* A CSS snippet for Ecwid to alter buy now buttons.
* The button CSS styles is from this list: http://hellohappy.org/css3-buttons/ ('Shiny blue')
*/
/* This code prevents the button height issues and default IE fallbacks in Ecwid */
button.ecwid-AccentedButton,
button.ecwid-AccentedButton:hover,
button.ecwid-AccentedButton:active {
height: auto;
filter: none;
background-image: none;
}
/* Button style in normal state. Pay attention to the class - it should be '.ecwid-AccentedButton' */
button.ecwid-AccentedButton {
background-color: #759ae9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
border-top: 1px solid #1f58cc;
border-right: 1px solid #1b4db3;
border-bottom: 1px solid #174299;
border-left: 1px solid #1b4db3;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0;
text-shadow: 0 -1px 1px #1a5ad9;
width: 150px;
}
/* Button style in hover state (when a visitor mouses over the button) */
button.ecwid-AccentedButton:hover {
background-color: #5d89e8;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5d89e8), color-stop(50%, #2261e0), color-stop(50%, #044bd9), color-stop(100%, #0d53de));
background-image: -webkit-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
background-image: -moz-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
background-image: -ms-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
background-image: -o-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
background-image: linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
cursor: pointer;
}
/* Button style in active state (when a visitor presses the button) */
button.ecwid-AccentedButton:active {
border-top: 1px solid #1b4db3;
border-right: 1px solid #174299;
border-bottom: 1px solid #133780;
border-left: 1px solid #174299;
-webkit-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment