Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Trevor Wood
Trevor Wood
17,828 Points

My buttons in CSS aren't working

Hey guys,

I'm trying to make buttons on the Cupcake Website but they aren't showing up. Here's my code if this helps.

body {
font-family: 'Nunito', sans-serif; 
color: #FAF3BC;
background: #420600 url('img/bg-texture.jpg') repeat;

}

a { color: #4FB69F; text-decoration: none; }

h1 { font-size: 1.750em; letter-spacing: -1.5px; }

h2 { font-size: 1.500em; color: #B4C34F; }

.btn { color: #FAF3BC; background: #4FB69F url('img/texture.png') no-repeat right top; padding: 15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }

.btn:hover { background-color: #4CC4A7; }

I think it's not linked together properly. Is there a right and wrong way to link the button and the text together?

3 Answers

Marcus Tisäter
Marcus Tisäter
4,886 Points

Is this a code challenge or you're doing this on you own? I suggest you add the img to you're html document with a src tag then add a class to it, then modify the size in the css file.

what is the HTML you are using to create your button??...

you could have a button this way.. first the HTML for it

<a class="button" href="#" style="top: 236px; left: 198.5px;">Button</a>

now for the css that would go with it..

.button {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}

.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}

.button:active {
border-top-color: #1b435e;
background: #1b435e;
}

give this a try, obviously you can change the CSS for the height, colors and whatever else.

Matt Campbell
Matt Campbell
9,767 Points

Why are you putting the position declaration inline when you have a CSS selector for it as well? Just put the positioning in the main CSS file.

Marcus Tisäter
Marcus Tisäter
4,886 Points

Yeah, you should defiantly try that out. But if you are new to html/css, I think you should modify your own css code in a simple way. Like width,height,background-color and border-radius :)

lack of sleep on my part haha. thanks for pointing it out to me though.

Trevor Wood
Trevor Wood
17,828 Points

It turned out the problem wasn't in the CSS part. It wasn't linking right with the index.html file.

Thanks guys! Much appreciated!