title: How do you make an image change on click and revert upon release using HTML/CSS/JS
body: <p>I have an issue with Styling an object to make it look like a button <strong>and</strong> act as a functional link.</p>
  
  <p>The effect i'm trying to achieve is to represent a button, so when clicked, it will begin to load the target page, but animate the object to visually represent a button being pressed.</p>
  
  <p>Here is a (non-working) <a href="https://jsfiddle.net/pmy74ox5/5/" rel="nofollow">JS Fiddle</a> as an example of the desired effect.</p>
  
  <p>The first fiddle has no JavaScript in it for now, as i am currently a novice when it comes to manually typing it.</p>
  
  <p>I have tried using pseudo classes, such as <code>:hover</code> as a temporary solution, but it doesn't work as desired, and from what i've tried, every possible solution i have seen on other questions don't seem to resolve my problem</p>
  
  <p><a href="http://jsfiddle.net/fS9Ct/1/" rel="nofollow">This JS Fiddle</a> i found in another question provides some coverage of the topic, but i can't seem to make it work for images, it only works for text and any changes i try just seem to break it or make the object not work or even appear.</p>
  
  <p>Any help with this would be greatly appreciated as i have been trying different methods for a few weeks.</p>
  
  <p>Thanks in Advance</p>