Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Therman Trotman
Therman Trotman
Courses Plus Student 376 Points

How do I make an img element look like it's being pressed?

If I'm using an img as a button, how to I get it to look like it's being pressed when a user clicks on it? I believe I would use JavaScript, but I'm not sure. Any help would be appreciated. Thanks!

6 Answers

Anton Williams
Anton Williams
5,157 Points
Anton Williams
Anton Williams
5,157 Points

You wouldn't need JavaScript, CSS is more than capable.

This is how you would style a pressed image.

img:active{
}

There are a few obvious ways to make an image look clicked, some designers like to make the image come closer to the cursor, this is material design.

img:active{
   transform:scale(1.2);
   box-shadow:2px 2px 10px rgba(0,0,0,0.3);
}

another way is to make the image smaller.

img:active{
   transform:scale(0.9);
}

You can play around with lots of css stylings when an image is clicked, if your other buttons add a border or go transparent on click then your image could as well.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Therman Trotman ,

I'm leaving a comment here since you indicated you wanted to go with Anton's solution.

To make sure I understand, you can't use transform: scale(0.9); in your actual project, correct?

I wanted to give you one way you could approach this using css2.

First, figure out your scale factor. I'll assume 90%.

Then figure out what 90% of the width of your image is.

Set that width in the css. You don't have to set the height because the browser will calculate it to maintain proportions.

I'll assume a 100px square image.

img:active {
  width: 90px;
}

This will scale it down to 90% but it will be anchored to the top left and not the center like the transform would do.

To compensate for this, you can add padding around the image.

img:active {
  width: 90px;
  padding: 5px;
}

I added 5px all around to account for a 10px reduction in both dimensions.

Here's a code pen demo showing both ways. http://codepen.io/anon/pen/VPjdqQ

I'm not seeing any visual differences myself.

If your image isn't square then your top and bottom padding will be different from the left and right padding.

Redweb FED
Redweb FED
15,517 Points
Redweb FED
Redweb FED
15,517 Points

Hey, Therman

I made a quick Codepen with a possible solution for you.

http://codepen.io/Adam_Rusty/pen/RKWQBz

This doesn't use any JavaScript, but instead uses an inset box shadow to create the illusion of the image having depth while the user has there mouse down on the image.

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

A slight movement is an effect I commonly see.

This could be combined with the shadow Adam suggested.

.image-wrapper:active {
    transform: translate(4px, 4px);
}
Therman Trotman
PLUS
Therman Trotman
Courses Plus Student 376 Points
Therman Trotman
Therman Trotman
Courses Plus Student 376 Points

Wow, you guys are fast! I didn't get an email notification that there were any answers.

I'm going to give these a shot. BTW, I forgot to mention that I'm stuck using this on Internet Explorer and CSS 2.0 for SharePoint 2010.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Which versions of IE?

Therman Trotman
PLUS
Therman Trotman
Courses Plus Student 376 Points
Therman Trotman
Therman Trotman
Courses Plus Student 376 Points

11, Jason Anello

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I don't have experience with sharepoint. Is the css 2.0 restriction for sharepoint? Because IE 11 supports css3.

And does that mean you weren't able to use any of the suggestions here because they're css3?

Can you provide the markup that you currently have for this image button?

Therman Trotman
PLUS
Therman Trotman
Courses Plus Student 376 Points
Therman Trotman
Therman Trotman
Courses Plus Student 376 Points

Yup. Correct. It's CSS 2.0 in SharePoint 2010.

Here is my current markup, Jason Anello (not sure if I have to tag you every time I respond):

<A onclick="OpenPopUpPage('/sites/rdecomg1ext/Lists/G1%20History/NewForm.aspx', RefreshPage); return false;" type=submit><IMG src="/sites/rdecomg1ext/G1%20Pics/HR_History_ICON_AddHistory.png"></A>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

No, you don't have to tag every time. If I'm already subscribed to a question then I'll get a notification either way. You'd want to tag someone for sure if you wanted to bring something to their attention and you don't think they're already subscribed.

Also, you can use the "Add Comment" link below each answer and question if you're replying to someone else's response instead of leaving another answer. This helps keep the discussion more organized.

Ok, were you able to try any of the suggestions so far either in your browser or something like codepen to see if they were going in the direction that you're looking for? We might be able to figure out a css 2.0 way of doing it if you liked any of them.

Or do you have an idea of the direction you want to go?

Can you describe the image? It's a png. Are the edges transparent with an icon in the center? Describe the edges if they're not transparent. Any solution involving scaling or moving the image is going to potentially expose the underlying background.

Also, is this a fixed size image or fluid?

Here's a link that might help you: http://usabilitypost.com/2008/12/16/pressed-button-state-with-css/

This would depend on whether you have the resources to create a second image in a graphics program that makes the image look pressed down.

Therman Trotman
Therman Trotman
Courses Plus Student 376 Points

Ok. Good deal. Thanks for the explanation on commenting.

So I tried all the responses and I liked Anton's :

img:active{
   transform:scale(0.9);
}

The image does have a transparent edge with icon in the middle. The transparent edge has flat sides while the icon has rounded edges. Fixed size.

I'll take a look at the link. Thanks for the help!