0

I have an issue with Styling an object to make it look like a button and act as a functional link.

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.

Here is a (non-working) JS Fiddle as an example of the desired effect.

The first fiddle has no JavaScript in it for now, as i am currently a novice when it comes to manually typing it.

I have tried using pseudo classes, such as :hover 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

This JS Fiddle 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.

Any help with this would be greatly appreciated as i have been trying different methods for a few weeks.

Thanks in Advance

Dan-at-Online99
  • 1
  • 4
  • I looked at the (non-working) JS Fiddle. You need to have 2 images. one to show when it is not clicked and another to show when it is clicked. But fiddle has only one image. Once you got 2 images then in onclick event listener can do the trick for your requirement. (Upload the 2nd image in Fiddle). ---- To get a hand cursor when mouse is on image use the `span img { position: absolute; clip: rect(0px,300px,300px,0px); cursor: pointer; }` in CSS – Raghava Rudrakanth P V May 07 '15 at 11:35

3 Answers3

0

You can use :hover in css.

https://jsfiddle.net/pmy74ox5/6/

In your case (without js), use background-url in img and change its url in img:hover

Faiz Shukri
  • 95
  • 10
  • I don't mind using JavaScript where necessary, but i need the image to change to the second example on click as opposed to hover, as it didn't provide the results i needed – Dan-at-Online99 May 07 '15 at 11:35
0

you could wrap the button in an empty anchor tag and then use the :active selector on the a tag.

a:active{
  //some styling
}

check out the selectors for a tags here:

http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act

the other way of doing it may be to use the checkbox hack: https://css-tricks.com/the-checkbox-hack/

or in js, something like:

var my_button = getElementById('button')
var clicked = false;
var buttonClicked = function(e){
  if(!clicked){
    my_button.classList.add("downClass");
  }else{
    my_button.classList.remove("downClass");
  }
}

my_button.addEventListener('click',buttonClicked);
eskimomatt
  • 195
  • 9
0

You can define the img in css and use a little jquery to have the desired effect : 

.button{
    background:url(https://cdn.tutsplus.com/vector/uploads/legacy/tuts/000-2011/463-steel-buttons/35.jpg) no-repeat 0 top;
    width: 300px;
    height: 300px;
    display: inline-block;
}
.button.click{
    background:url(https://cdn.tutsplus.com/vector/uploads/legacy/tuts/000-2011/463-steel-buttons/35.jpg) no-repeat  -300px top;
}

here the js 

$('.button').on("mousedown", function(){
    $(this).addClass('click');
})
$('.button').on("mouseup", function(){
    $(this).removeClass('click');
})

https://jsfiddle.net/pmy74ox5/7/

a solution with only jquery is possible too.

ekans
  • 1,662
  • 14
  • 25