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 Omar Suriel
Omar Suriel
5,403 Points

How do I make a button that appears to have 2 boxes. One inside of another, without changing the HTML

here is my code:

http://codepen.io/anon/pen/gmxMyB

here is what i am trying to replicate: https://i.imgur.com/gnZnY.png

I dont know how I can get the outer box of the button without changing the HTML, Please help!

Vlad Legkowski
Vlad Legkowski
9,882 Points 
a {
  display: inline-block; 
  padding: 10px 40px;
  border: 10px solid #999;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.6);
  background: linear-gradient(to top, #adadad, #c5c5c5 49%, #d2d2d2 50%, #e0e0e0);
  color: #555;
  text-transform: uppercase;
  font-weight: bold;
  font-family: arial;
  text-decoration: none;
  font-size: 20px;
}

try this

1 Answer

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

I don't normally do someone's homework assignment.

But this one intrigued me. And I think I also exceeded the time limit, but I was trying to see just how close I could come. They did say it was "open book", and I'll leave the explaining to you.

a {
  display: inline-block;
  padding: 14px 20px;
  margin: 12px 0 0 12px;
  box-shadow: 1px 2px 0 #666,
              0 0 0 8px #bbb,
              0 0 0 10px white,
              0 0 0 12px #444,
              12px 14px 12px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  background: linear-gradient(to top, #adadad, #c5c5c5 49%, #d2d2d2 50%, #e0e0e0);
  color: #444;
  text-transform: uppercase;
  font-weight: bold;
  font-family: arial;
  text-decoration: none;
  font-size: 24px;
}

a::before,
a::after {
  content: "⋆";
  font-size: 50px;
  line-height: 10px;
  position: relative;
  top: 7px;
  color: #888;
}