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

CSS

Making buttons

What's the best way to make a button like the one on the frontpage of Treehouse before you sign it. It's green. I have made one that works the exact same way when you click it, but it caused the content underneath to be pushed down by a couple pixels each time the button is pressed. Didn't know if there was a way to position it maybe without making it absolute that wouldn't cause the content underneath to slide down.

Thank you in advance!

Justin

5 Answers

A nice simple button if its a link like theirs.

in your HTML
a href = "#" >Link</a

in your css folder: a, a:visited{text-decoration:none;background-color:green;border-radius:5px;}a:hover{background-color:darkgreen;}

I think that should work. :P

What I was going for was what happens after you click the button.

Adam Soucie
PLUS
Adam Soucie
Courses Plus Student 8,710 Points

If you're talking about the animated aspect, I believe you'd have to use a Javascript/jQuery click handler, and then use CSS3 animations. I don't believe you can do it with only CSS, but using the :active pseudo-class might be worth looking into as well.

yea I've tried with the :active and that's when it moved my other content down... I will check out click handlers...thanks adam

A classic example of when to use your browsers web dev tools and view the source. I use firefox mainly but you should be able to in most modern browsers, then target that element and you'll identify what css or jquery they are using. Great way to learn neat tricks of the trade.