Skip to content

Instantly share code, notes, and snippets.

@JiLiZART
Created May 20, 2013 15:13
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 JiLiZART/5612859 to your computer and use it in GitHub Desktop.
Save JiLiZART/5612859 to your computer and use it in GitHub Desktop.
A CodePen by David HC.
<div class='button'>
<div class='iphone'><div class='knob'></div></div><center><span>Available on the <h2>App Store</h2></span></center>
</div>
<h1 class='price'>$9.00</h1>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
.iphone {
width: 33px;
height: 57px;
float: left;
background: #fff;
border-radius: 4px;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.iphone:before {
content: '';
width: 8px;
z-index: 1;
height: 2px;
background: #f44;
position: absolute;
left: 50%;
margin-left: -4px;
top: 4px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.iphone:after {
content: '';
width: 27px;
z-index: 1;
height: 37px;
background: #f44;
position: absolute;
left: 50%;
margin-left: -14px;
margin-top: 10px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.knob {
width: 5px;
z-index: 2;
height: 5px;
background: #f44;
position: absolute;
left: 50%;
margin-top: 49px;
margin-left: -3px;
border-radius: 50px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.button {
width: 200px;
background: #f44;
padding: 18px 30px;
height: 58px;
border-radius: 10px;
display: inline-block;
}
.button span {
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.4);
font: 17px 'Open Sans';
float: right;
}
span h2 {
margin: 0;
font-size: 30px;
padding: 0;
line-height: 0.9;
}
h1.price {
margin-left: 15px;
padding: 0;
display: inline-block;
vertical-align: 35px;
color: #f44;
font-size:38px;
}
body {
font-family: 'Open Sans';
background: #fafafa
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment