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 jose macedo
jose macedo
6,041 Points

navigation border for buttons

http://www.templatemonster.com/website-templates/26055.html#gref

how do i make the navigation right border like in this template

Shawn Wilson
.a{fill-rule:evenodd;}techdegree
Shawn Wilson
iOS Development Techdegree Student 7,049 Points

what are you referring to? the buttons?

jose macedo
jose macedo
6,041 Points

yes the buttons

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

This appears to be done in Flash, so I would guess those are simply images. But I was intrigued with the idea of creating a similar look purely in CSS, and I came up with this "btn" class definition:

.btn {
  width: 200px;
  position: relative;
  background: #40b3ff;
  background-image: linear-gradient(to bottom, #40b3ff, #2980b9);
  border-radius: 5px;
  text-shadow: 1px 1px 3px #666666;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 20px;
  text-align: left;
  border: solid rgba(255,255,255,.1) 2px;
  margin-bottom: 2px;
}
.btn::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 20px;
  height: 28px;
  width: 28px;
  background: #01486e;
  border-radius: 50%;
  box-shadow: 1px 1px 3px skyblue;
}
.btn::after {
  content: "";
  position: absolute;
  top:22px;
  right: 17px;
  border: 8px solid transparent;
  border-left: 14px solid white;
}

You could probably import a font that matches better, and tweak a few visual aspects, but I think it's very close as-is.
:sparkles: