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

Owen McFadzen
Owen McFadzen
5,718 Points
Posted by Owen McFadzen
Owen McFadzen
5,718 Points

Making a button group

So I have been making some nice buttons and now I want to add a class to turn them into a button group.

My button html is <div> <a class="btn btn-lg-primary"> <span>Click me</span> </a> </div> and I would like to put it in a surrounding div <div class="btn-group"> that would take off the border-radius and put the beside each other.

Any best practices for building a button group out there?

Thanks!

2 Answers

Jake Fleming
STAFF
Jake Fleming
Treehouse Guest Teacher
Jake Fleming
Jake Fleming
Treehouse Guest Teacher

I would just do something like this:

HTML:

<div class="button-group">
  <button type="button" class="button">Button</button>
  <button type="button" class="button">Button</button>
  <button type="button" class="button">Button</button>
</div>

CSS:

.button {
  background-color: #5D9CEC;
  border: 1px solid #468ee9;
  border-radius: 3px;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
}

.button-group {
    font-size: 0;
    vertical-align: top; 
}
.button-group .button {
    border-radius: 0;
    font-size: 16px; 
}
.button-group .button:first-of-type {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; 
}
.button-group .button:last-of-type {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px; 
}
Owen McFadzen
Owen McFadzen
5,718 Points
Owen McFadzen
Owen McFadzen
5,718 Points

Thanks, I resorted to restyling my buttons and writing them as buttons not as a span in a a. It's more semantically correct also.

Thanks.