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

Posted by Zach Perry
Zach Perry
1,303 Points

Simplest Way to add an image in a button

I've been trying to find the least confusing way to add an image inside of a button in HTML & CSS. It's just a small icon. Any help is greatly appreciated. Here is the code that I have for my button

<ul> <center><li><a class="button-small dinner rounded3" href="dinner.html">Dinner</a></li></center>

Thank you for your time

2 Answers

Shawn Williams
Shawn Williams
Courses Plus Student 4,462 Points

You can apply a class to your button and style it in your CSS by applying a background image.

Your code: 

<center><li><a class="button-small dinner rounded3" href="dinner.html">Dinner</a></li></center>

I see you have 3 classes you are applying to this link. Would it not be easier to create one class to style this button? In this class, you can set the background image to the image you are wanting to be displayed in the button.

I would also remove the <center> tags and style the li in the CSS instead.

Here is an example:

<a href="dinner.html" class="dinnerButtonSmall">Dinner</a>

.dinnerButtonSmall {background-image: url('dinnerSmall.png'); background-color: #3e3e3e; margin: 0; padding: 2px; border: 1px solid #000; border-radius: 10%; Padding: 2px; Margin: 0;}
Bill Hinostroza
Bill Hinostroza
19,273 Points
Bill Hinostroza
Bill Hinostroza
19,273 Points 
<input type="image" src="logg.png" name="saveForm" class="btTxt submit" id="saveForm" />

For a explanation go here: http://stackoverflow.com/questions/16131988/making-an-image-act-like-a-button