Hi,

 

I am trying to create a button that would stretch out on hover. When the button is static it would look like this:

 

 

On hover, I would like my button to look like this:

 

 

Does anyone know to achieve this using jQuery, where on hover it would actually stretch out rather then jump between two images?

Edited May 4, 201214 yr by madbytes

Modifing this should do the trick.

 

Use the basic principles, but rather than navigation, use buttons

Easy.

 

http://jsfiddle.net/ujWcW/1/embedded/result/

Easy.

 

http://jsfiddle.net/ujWcW/1/embedded/result/

Slick.

Ignore my answer. Mike's is much better!

Thanks, that was easier then i thought haha.

Thanks Guys, but i am not able to open this URL, i have tried on Chrome and Firefox..

any other URL you can suggest.

 

thanks

What d'you mean, you can't open the URL - what happens?

Thanks Guys, but i am not able to open this URL, i have tried on Chrome and Firefox..

any other URL you can suggest.

 

thanks

This is the link to see the code used.

Surely you could use plain old CSS to do this?

 

Something like...

<a href="http://www.twitter.com/" title="My Twitter link" class="twitter"></a>

a.twitter {
display: block; 
width: 16px; 
height: 16px; 
background: url(twitter-small.png) no-repeat; 
transition: width 2s;
}

a.twitter:hover, a.twitter:focus {
width: 100px; 
background: url(twitter-large.png) no-repeat; 
}

Surely you could use plain old CSS to do this?

 

You could, and I'd be tempted to. It would be a non-IE enhancement though.

Surely you could use plain old CSS to do this?

 

Something like...

<a href="http://www.twitter.com/" title="My Twitter link" class="twitter"></a>

a.twitter {
display: block; 
width: 16px; 
height: 16px; 
background: url(twitter-small.png) no-repeat; 
transition: width 2s;
}

a.twitter:hover, a.twitter:focus {
width: 100px; 
background: url(twitter-large.png) no-repeat; 
}

 

 

With that code, you're going to get a "flicker" as the background image changes first time.

 

Best to use one image, and use border-radius to make it look rounded on all sides when shrunk IMO.

You could, and I'd be tempted to. It would be a non-IE enhancement though.

 

 

I'm sure there's a Polyfill out there for transitions for IE.

 

If not, I would recommend using Modernizr to check (I think it can check for transitions support) then load your normal jQuery animation for non-CSS3 transition supporting browsers - but still using CSS3 for those that support it.

Edited May 7, 201214 yr by brightonmike

What d'you mean, you can't open the URL - what happens?

 

Apologies my mistake, i can see the page now..