Last active
April 25, 2021 20:48
-
-
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')
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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