Skip to content

Instantly share code, notes, and snippets.

@jeffkreeftmeijer
Created July 22, 2011 23:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeffkreeftmeijer/1100648 to your computer and use it in GitHub Desktop.
Save jeffkreeftmeijer/1100648 to your computer and use it in GitHub Desktop.
<style>
body{
background-color: #333;
color: #222;
padding: 20px;
font-family: "Helvetica Neue", Helvetica;
line-height: 150%;
font-size: 14px;
text-shadow: 0 1px 1px #fff;
}
div.outer{
margin: 10px auto;
max-width: 700px;
background-color: #888;
-webkit-border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
}
div.inner{
top: -5px;
padding: 20px;
position: relative;
background-color: #eee;
border-top: 1px solid #fff;
border-bottom: 1px solid #777;
-webkit-border-radius: 5px;
-webkit-box-shadow: inset 0 0 10px #666;
}
h1{
font-size: 200%;
font-weight: 900;
margin: 10px 0 20px 0;
}
p{
margin-bottom: 20px;
}
a.button{
font-size: 120%;
font-weight: 900;
color: #eee;
text-align: center;
text-shadow: 0 -1px 1px #000;
text-decoration: none;
display: block;
background-color: #222;
-webkit-border-radius: 8px;
-webkit-box-shadow: 0 5px 5px #888;
margin-bottom: 5px;
border: 3px solid #000;
}
a.button span{
top: -5px;
padding: 10px;
position: relative;
background-color: #444;
border-top: 1px solid #333;
display: block;
-webkit-border-radius: 5px;
-webkit-box-shadow: inset 0 0 10px #333;
}
a.button:active{
-webkit-box-shadow: 0 2px 5px #888;
}
a.button:hover span{
top: -4px;
}
a.button:active span{
top: 0;
}
</style>
<div class="outer">
<div class="inner">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<a class="button" href="#"><span>Go!</span></a>
</div>
</div>
@beaumartinez
Copy link

@jeffkreeftmeijer
Copy link
Author

@beaumartinez thanks for putting it on jsFiddle for me! I updated it a little bit so it looks good when the default styles are reset: http://jsfiddle.net/byBSR/6/embedded/result/ :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment