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

Brian webb
Brian webb
3,769 Points
Posted by Brian webb
Brian webb
3,769 Points

Made a Css button, wanted curious how I did

Whats up everyone, I have been using my themes built in buttons and wanted to try to make the same thing my self in css, Well I think I got it and it works pretty good, Just gotta figure out how to add a link to it and see if there is anything I could have done better. Thanks in advance. I love this community here is the html

<a class="butnorng" href="http://olympiavaporworks.com/best-ohm-meters/"><i class="fa fa-android"></i>&nbsp;&nbsp;E-juice Store</a></li>

.btnstyl:hover {
background-color: black;
}
.btnstyl {
display: block;
     background-color: #E25D33;
     float: left;
     text-align:center;
     vertical-align:middle
    padding: 0.3em 1em !important;
    padding-top: 0.2em;
    padding-right: 1em;
    padding-bottom: .4em;
    padding-left: 1em; 
    border-top-left-radius: 7px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 8px;
    font-size: 22px;
    color: white;
    margin-left: 22px;
    margin-right: 22px;
   -webkit-transition: all .2s ease-out;
   -moz-transition: all .2s ease-out;
   -o-transition: all .2s ease-out;
   -ms-transition: all .2s ease-out;
   transition: all .2s ease-out;
}

3 Answers

Sue Dough
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

Your code is pretty messy. And its does not work because the class in the a href is not the css class.

The CSS is very repetive. For example you call padding with an important rule. Then you have 4 padding rules that are useless after it. The margin could be shorthand property so 1 line instead of 2. Your border radius makes no sense from design perspective. Why would you want an uneven radius on a button especially left, right.

The naming convention styl is not scalable. Are you going to add styl after every style change? I renamed it, however feel free to name it something more appropiate.

This should work a lot better.

.btncustom {
  background-color: #E25D33;
  border-radius: 7px;
  color: white;
  float: left;
  font-size: 22px;
  margin: 0 22px;
  padding: 0.3em 1em;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.btncustom:hover {
  background: black;
}

<a class="btncustom" href="http://olympiavaporworks.com/best-ohm-meters/"><i class="fa fa-android"></i>&nbsp;&nbsp;E-juice Store</a></li>

Example codepen http://codepen.io/anon/pen/JYQKBV

Abdul Zainos
Abdul Zainos
4,938 Points

I'm wondering why they don't teach LESS. CSS I think it would be much cleaner to write than regular CSS. That's one of my main problem is having to repeat lot's of code and make changes to many points on a style sheet. Styling with CSS would definitely reduce the amount of repetitive code we all would have to write.

Sue Dough
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

Absolutely. It helps you write better CSS.

Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

I should look into less

Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

Thanks a ton for this, I knew what I was doing was ugly but its nice to know Im on the correct track. Its funny how the border-radius was so off even, I actually took those off the themes button, so I didnt come up with those wonky corners. I actually had it just border-radius: 7px; at first but I noticed the corners looked funky, They went even and the radius wasn't complete, its like it was stopping halfway around. Anyway thanks again everyone

Sue Dough
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

Brian webb I would reccomend focusing on getting better at CSS first and then evaluting your options on css preprocessors. It is important to have a good understanding of CSS fundamentals before hopping into something like SASS/LESS. Otherwhise it may be overwhelming and you won't be able to take full advantage of most of the features.

Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

Thanks, Ya I have a problem with wanting to learn more and more and more, When I get into something Im 100% haha,

Abdul Zainos
Abdul Zainos
4,938 Points
Abdul Zainos
Abdul Zainos
4,938 Points

First of all great job, you have this coding thing down, none of us started as experts, but you're well on your way to becoming one.

I do have a few notes that will help you write code more efficiently for you, mainly tips that will help you organize your code and speed things up.

For starters, organize your CSS in a way that makes sense to you. Like maybe starting by targeting structure first, then content, then color and then positioning. Ultimately it's a preference.

I think you did awesome.

The code below is my rendition of what I think you were trying to accomplish. 

.button {
  display: block;
  margin: 0 22px 0;
  padding: 0.3em 1em !important; /*This styles the top, bottom and both sides of your element*/
  float: left;
  vertical-align: middle;
  color: white;
  font-size: 22px;
  text-align:center;
  background-color: #E25D33;
  border: 2px solid black; /*Maybe thought you should define these parameter first */
  border-radius: 3px; /*Using this will allow you to target all corners and provide consistency*/
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.button:hover { /*I think placing hover styling after the element you just finished styling is good chronological practice*/
  background-color: #000;
}
Sue Dough
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

What in the world would margin: 0 22 0; do ? :)

Abdul Zainos
Abdul Zainos
4,938 Points

Hoops! lol meant to add px after 22.

Abdul Zainos
Abdul Zainos
4,938 Points

oh man total suckage... well I guess looking at it now that 0 at the end seems totally unnecessary... I guess I could call it my signature. lol Cheers!

Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

I really wish I could have all those be the best answer

Brian webb
Brian webb
3,769 Points
Brian webb
Brian webb
3,769 Points

Thanks for your feedback. Yes iI. New to css as I've been doin it for a bit a week or two now, but ya ill give your suggestions a shot. I knew the code was messy but it's like that ugly picture your kid does. Lol. Again Thanks for the feedback that is exactly what iI needed to hear.