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

Trevor Wood
Trevor Wood
17,828 Points
Posted by 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
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.

Brian Pirouet
PLUS
Brian Pirouet
Courses Plus Student 1,653 Points
Brian Pirouet
Brian Pirouet
Courses Plus Student 1,653 Points

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
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
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 :)

Brian Pirouet
Brian Pirouet
Courses Plus Student 1,653 Points

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

Trevor Wood
Trevor Wood
17,828 Points
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!