Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pixeldroid

How to make buttons with images?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all:

I need to create an interface using html5 which involves placing several 3-state buttons (base, mouseOver, and mouseDown) on a background.  I'm still new to html5, so I hope you don't mind me asking here - I figure this would be a good first project to begin to learn GSAP JS. Everything has a lot of texture, so the buttons need to be placed in various exact locations over the bg. From my web research, I've seen recommendations to use the 'button' tag and also layers of canvases.  Any recommendations and/or samples would be appreciated.

Thanks much.

Link to comment
Share on other sites

Hi,

 

There is more than one approach to this.

 

One is to animate the background-position property using GSAP. For this you have to create a background sprite that has the 3 images and you tween it's position depending on the mouse event (over, down and out). I set up a simple codepen:

 

See the Pen Kvwyt by rhernando (@rhernando) on CodePen

 

Another option is to add the 3 images to the button container, is not too relevant whether you're using a button tag or a div element with an a tag in it, you can use CSS in order to style it the way you want. Also there are some pure CSS button generators online, just google it. By adding the 3 images on the container you can play a lot more with how they appear/disappear in the container, you can slide them from the right, left, top, bottom, fade in/out and also can use 3D effects, kind of a 3D box button. Also the good thing about this way is that you don't have to create the background sprite, so if for some reason you need to change an image in the future you just replace that image, while using the sprite means creating the sprite all over again.

 

I'll set up some samples during the afternoon and post them.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Thanks a lot Rodrigo!

I appreciate your examples - they induced me to get moving on studying up on html5.

I'm still a total newb on this stuff (though a long-time AS3 coder), but having done some R&D on this issue, it appears to me that if the images are used as the background for a div, they won't scale when used in a responsive design.  The div will scale, but the bg image of the div will get cropped.  I've only tested this w/the 'Foundation' framework so far.

I think the best approach will be to put the whole thing into a canvas and use one the techniques in your sample for swapping images.  In this case, I'm re-creating some old software UI's for my portfolio, so I happen to have all the buttons as sprites (bmp's no less - they are almost 15 years old!).

Thanks again.

Link to comment
Share on other sites

just a quick note.. if you want the background image to scale for responsive design.. take a look at the CSS background-size property..

depending on what media queries you are using for responsive design... you can use this property inside the different media queries ..the background-size property can scale the background image based on the width and height you pass to it.

 

background-size:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
http://www.sitepoint.com/css3-background-size-property/

it's a great property and is available in the modern browsers with the exception of IE8

http://caniuse.com/#search=background-size

:)

Link to comment
Share on other sites

  • 3 weeks later...

As a followup:

I found that using an svg container was the easiest way to accomplish this task.  Adding backgrounds to divs or even stacking several images into single/multiple divs led to a variety of failed experiments (over many hours) - especially when trying to keep the thing together when resizing. While I haven't tested it extensively, so far the svg behaves like the Flash stage. I didn't use GS to manipulate the objects, but I will testing that out in the near future.

Thanks again for the replies.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×