How To Make An iPhone Back Button With No Images

This little guide will walk you through making an iPhone back button with no images for a -webkit browser.

First off, this shape is comprised of two elements, the body and the point.

Let's start with the body.

Markup

<div class="body"></div>

CSS

div.body { 
    position: relative;  
    height: 26px; 
    width: 45px; 
    background: #000;
}

* Notice that we declared the position relative. This is necessary as we will be positioning the point absolutely.

Ladies and gentlemen, the body:

Secondly, we'll add the point.

Markup

<div class="body">
  <div>
  </div>
</div>

CSS

div.body { 
    position: relative;  
    height: 26px; 
    width: 45px; 
    background: #000;
}
div.body div {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #808080;
    position: absolute;	  
}

Now for the added point.

Starting to come together, right? Not quite. But don't worry, it'll be a breeze from here.

Ok, it's time to add some -webkit magic to the point element.

CSS

div.body { 
    position: relative;  
    height: 26px; 
    width: 45px; 
    background: #000;
}
div.body div {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #808080;
    position: absolute;
    -webkit-transform: rotate(45deg);	  
}

I don't know about you, but I'm really starting to like what I see!

Next, we're going to position the point and set it's background color.

div.body { 
    position: relative;  
    height: 26px; 
    width: 45px; 
    background: #000;
}
div.body div {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #000;
    position: absolute;
    -webkit-transform: rotate(45deg);	  
    top: 4px;
    left: -9px;
}

The complete shape:

That's it! Now that you have the basic shape, you can get as creative as you want with styling it to fit your needs.

Customization

Here's what I did with mine:

Markup

<div class="bar">
  <div class="body">
    <div>
      <span></span>
    </div>
  </div>
</div>

CSS

div.bar { 
    position: relative;
    height: 42px;
    border: 1px solid #cad6e2;
    border-bottom-color: #22374a; 
    border-right: 0;
    border-left: 0;
    text-align: center;
    background: -webkit-gradient(linear, left top,left bottom, from(#afbbcb), to(#6e86a4), color-stop(0.48, #8b9db5), color-stop(0.5, #8195af));
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
}
div.body { 
    position: relative; 
    margin: 6px 0 0 12px; 
    height: 26px; 
    width: 45px; 
    border: 1px solid rgba(0,0,0, 0.4);  
    -webkit-border-radius: 5px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa)); 
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);
}
div.body div { 
    position: absolute; 
    z-index: 1; 
    top: 4px; 
    left: -7px; 
    -webkit-transform: rotate(51deg);
}
div.body span { 
    -webkit-transform: skew(15deg);
    display: block; 
    width: 15px; 
    height: 16px; 
    background: -webkit-gradient(linear, left top, right bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa));   
    -webkit-border-radius: 1px; 
    border: 1px solid rgba(0,0,0, 0.4); 
    border-right: 0; 
    border-top: 0;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25);
} 
div.body p { 
    position: absolute; 
    z-index: 2; 
    top: 5px; 
    left: 5px; 
    margin: 0; 
    padding: 0; 
    font-size: 12px; 
    font-weight: bold; 
    color: #fff; 
    text-shadow: 0 -1px 0 rgba(0,0,0, 0.4);
}

Note: I actually added a span in the point element. I used the span for the coloring and used the div for the positioning. This was needed because I used -webkit-transform: skew(); to flatten out the point a bit.

I hope you've enjoyed this tutorial. Feel free to use any of this in your own work.

If you have any questions, shoot them to me on Twitter or contact me through my website.