title: CSS custom button slide transition?
body: <p>Alright Google isn't helping me out much here. </p>
  
  <p>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. </p>
  
  <p>Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery. </p>
  
  <p>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):</p>
  
  <pre><code>&lt;div id="Abutton"&gt;&lt;a  draggable="false" title="A button n' stuff"&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>#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%;
  }
  </code></pre>
  
  <p>(Plus a further # for the positioning and size etc..)</p>
  
  <p>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!). </p>
  
  <p>Thanks in advance!</p>