diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css index 964d8684799e075c1e292f2e4f29ad9a322f0016..267757e7ab122b197e2d65fb705acf5897304b6e 100644 --- a/src/components/sprite-selector/sprite-selector.css +++ b/src/components/sprite-selector/sprite-selector.css @@ -67,42 +67,48 @@ } .raised { - -webkit-box-shadow: 0px 0px 6px 2px rgba(0,222,7,1); - -moz-box-shadow: 0px 0px 6px 2px rgba(0,222,7,1); - box-shadow: 0px 0px 6px 2px rgba(0,222,7,1); + background-color: #cce1ff; + border-color: #8cbcff; + transition: all 0.25s ease; } .raised:hover { - -webkit-animation-name: wiggle; - -ms-animation-name: wiggle; - -ms-animation-duration: 500ms; - -webkit-animation-duration: 500ms; - -webkit-animation-iteration-count: 1; - -ms-animation-iteration-count: 1; - -webkit-animation-timing-function: ease-in-out; - -ms-animation-timing-function: ease-in-out; + background-color: #8cbcff; + transform: scale(1.05); +} + +.raised:hover { + -webkit-animation-name: wiggle; + -ms-animation-name: wiggle; + -ms-animation-duration: 500ms; + -webkit-animation-duration: 500ms; + -webkit-animation-iteration-count: 1; + -ms-animation-iteration-count: 1; + -webkit-animation-timing-function: ease-in-out; + -ms-animation-timing-function: ease-in-out; + background-color: #8cbcff; } @-webkit-keyframes wiggle { - 0% {-webkit-transform: rotate(3deg);} - 25% {-webkit-transform: rotate(-3deg);} - 50% {-webkit-transform: rotate(5deg);} - 75% {-webkit-transform: rotate(-2deg);} - 100% {-webkit-transform: rotate(0deg);} + 0% {-webkit-transform: rotate(3deg) scale(1.05);} + 25% {-webkit-transform: rotate(-3deg) scale(1.05);} + 50% {-webkit-transform: rotate(5deg) scale(1.05);} + 75% {-webkit-transform: rotate(-2deg) scale(1.05);} + 100% {-webkit-transform: rotate(0deg) scale(1.05);} } @-ms-keyframes wiggle { - 0% {-ms-transform: rotate(3deg);} - 25% {-ms-transform: rotate(-3deg);} - 50% {-ms-transform: rotate(5deg);} - 75% {-ms-transform: rotate(-2deg);} - 100% {-ms-transform: rotate(0deg);} + 0% {-ms-transform: rotate(3deg) scale(1.05);} + 25% {-ms-transform: rotate(-3deg) scale(1.05);} + 50% {-ms-transform: rotate(5deg) scale(1.05);} + 75% {-ms-transform: rotate(-2deg) scale(1.05);} + 100% {-ms-transform: rotate(0deg) scale(1.05);} } @keyframes wiggle { - 0% {transform: rotate(3deg);} - 25% {transform: rotate(-3deg);} - 50% {transform: rotate(5deg);} - 75% {transform: rotate(-2deg);} - 100% {transform: rotate(0deg);} + 0% {transform: rotate(3deg) scale(1.05);} + 25% {transform: rotate(-3deg) scale(1.05);} + 50% {transform: rotate(5deg) scale(1.05);} + 75% {transform: rotate(-2deg) scale(1.05);} + 100% {transform: rotate(0deg) scale(1.05);} } \ No newline at end of file