CSS custom button slide transition? - html

Question

Alright Google isn't helping me out much here.
The aim of the game is to have a button, which is a custom png, and upon mouse rollover it 'slides upwards', remaining in the same spot but transitioning to the rollover by means of sliding.
Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery.
Currently I've only managed to get it to slide from the left side. Downwards is fine too.
Code is about as simple as it comes, the HTML looks like this (Just a basic DIV):
<div id="Abutton"><a draggable="false" title="A button n' stuff"></a></div>
The CSS:
#Abutton a {
background: url(mediafolder/Abutton.png) no-repeat 0% 0px;
display: block;
height: 32px;
width: 86px;
cursor: pointer;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#Abutton a:hover {
background-position: -86px 0%;
}
(Plus a further # for the positioning and size etc..)
If it makes for any complications the button is also tied to a JQuery file that upon clicking, smooth scrolls to a different point in the page (Props to the awesome chap that helped me out with that last night!).
Thanks in advance!

Answer 1

I think what you're asking is a slot machine display type feel?
Just use an image sprite, which you pretty much already are trying to do, and put a css animation on it, and it will look what you want (which i think is what you want?) Best of luck
.animate {
-webkit-transition: all 0.250s -in-out;
-moz-transition: all 0.250s ease-in-out;
-o-transition: all 0.250s ease-in-out;
transition: all 0.250s ease-in-out;
}