Skip to content

Instantly share code, notes, and snippets.

@makfruit
Last active April 25, 2021 20:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save makfruit/5235946 to your computer and use it in GitHub Desktop.
Save makfruit/5235946 to your computer and use it in GitHub Desktop.
A CSS code snippet for Ecwid to alter the Buy now buttons styles. Online buttons generators used: - http://css3button.net/76603 - http://dabuttonfactory.com/
/* Styles for the 'Buy now' button */
button.ecwid-AccentedButton {
height: auto;
}
button.ecwid-AccentedButton {
font-size: 13px;
color: #ffffff;
padding: 9px 18px;
background: -moz-linear-gradient(
top,
#00f7ff 0%,
#0097d8);
background: -webkit-gradient(
linear, left top, left bottom,
from(#00f7ff),
to(#0097d8));
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
border: 0px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0.5);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0.5);
text-shadow:
0px -1px 0px rgba(214,214,214,0.4),
0px 0px 0px rgba(209,209,209,0.3);
}
/* Styles for the 'Buy now' button in hover state */
button.ecwid-AccentedButton:hover {
font-size: 13px;
color: #ffffff;
padding: 9px 18px;
background: -moz-linear-gradient(
top,
#00f7ff 0%,
#0097d8);
background: -webkit-gradient(
linear, left top, left bottom,
from(#00f7ff),
to(#0097d8));
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
border: 0px solid #000000;
-moz-box-shadow:
1px 2px 5px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0.5);
-webkit-box-shadow:
1px 2px 5px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0.5);
box-shadow:
1px 2px 5px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0.5);
text-shadow:
0px -1px 0px rgba(214,214,214,0.4),
0px 0px 0px rgba(209,209,209,0.3);
}
/* Styles for the 'Buy now' text */
button.ecwid-AccentedButton span {
font-size: 16px;
color: #ffffff;
}
/* IE fall back (via background image) */
button.ecwid-AccentedButton-ie span {
display: none;
}
button.ecwid-AccentedButton-ie,
button.ecwid-AccentedButton-ie:hover {
background: transparent url("http://dabuttonfactory.com/b.png?t=%20Buy%20Now&f=Calibri-Bold&ts=20&tc=ffffff&tshs=1&tshc=d1d1d1&it=png&c=15&bgt=gradient&bgc=00f7ff&ebgc=0097d8&be=on&shs=1&shc=cfcfcf&sho=se&hp=21&vp=10") no-repeat top center;
filter: none;
width: 130px;
height: 35px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment