the best pure CSS3 iOS style arrow “Back” button

Nov 302011

tutorials css3 webapp web tutorial touch source code pure CSS iOS5 how to GUI free example effect Demo CSS3 CSS styling CSS button backbutton back arrowbutton arrow the best pure CSS3 iOS style arrow Back button

VERSION 2 COMING SOON.. SEE THE FIDDLE ON THE BOTTOM OF THE PAGE
see the iOS 6 Version here
I added a third version without the use of -webkit-mask-image on request. (Compatible with Firefox and Opera)
I recently needed to make CSS arrow buttons for iOS devices.
There are a few examples and sourcecodes on the www, but they all don’t seem perfect.
They all basically rotate a square and then use a mask to hide the unneeded part. This square is added with the pseudo-class :before or :after.

Sencha Touch

css3wizardry

hedgerwow

jeffbatterton

However a square does not give the correct angle since a square has 4 corners with 90deg angles and flat sides. “iOS arrows” have an angle of about 95deg – 100deg with slightly rounded (bent) sides. Jeffbatterton’s example uses a rhombus, but it really doesn’t look good and the markup is terrible since he’s not using the pseudo-classes :before and :after. I also added a “skew” to make a rhombus instead of a square and then rotated it, to make the arrow part a little slimmer, just like it is in iOS. To get the sides to look bent, I basically used two different curves.

One is applied to the main element’s left side…

    border-radius: 6px;
    -webkit-border-top-left-radius : 10px 15px;
    -webkit-border-bottom-left-radius : 10px 15px;

…and the second one is applied to the sides of the rhombus.

    -webkit-transform : rotate(-45deg) skew(-10deg, -10deg);
    -webkit-border-top-right-radius : 100px 40px;
    -webkit-border-top-left-radius : 30px 2px;
    -webkit-border-bottom-right-radius : 2px 30px;
    -webkit-border-bottom-left-radius : 40px 100px;

both together look like this.

Then we can mask the rhombus at about 33% – 50% to use both curves (I am using a fading gradient). Due to the rounded corners we now have an angle of about 96-97deg.

    -webkit-mask-image : 
        -webkit-gradient(linear, left top, right bottom,
            from(#000000), 
            color-stop(0.33,#000000), 
            color-stop(0.5, transparent), 
            to(transparent));
}

Using gradients like in the example below is a little complex, since the gradient is always relative to the height of the element. You can try to play around with background-image-size or just use a flat color to get better results.

#ios-arrow-left {
    left:20px;/*change the position*/
    top:10px;/*change the position*/   
    position:absolute;
    background-repeat:repeat-x;
    background-color: rgba(74,108,155,1);/*change this and the background color for the :before element*/
    background-image : -webkit-linear-gradient(
        bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 50%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.3) 100%
        );
    height:30px;
    padding: 0 10px 0 8px;
    z-index : 0;
    border-radius: 6px;
    -webkit-border-top-left-radius : 10px 15px;
    -webkit-border-bottom-left-radius : 10px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    box-shadow :-1px -1px 0px rgba(0,0,0,0.2)inset,
        0 1px 2px rgba(0,0,0,0.8)inset;
    font-size : 11px;
    display : block; 
    text-align:center;
    color:#fff;
    text-shadow : 0px -1px 0px #000;
    line-height : 30px;
    font-family : HelveticaNeue;
    font-weight: 700;
    -webkit-background-size : 30px;
}
 
#ios-arrow-left:before{
    position:absolute;
    top:9.9%;
    left:-5px;
    -webkit-background-size : 22px 22px;
    background-position :-2px -1.5px;
    background-color: rgba(74,108,155,1);/*change to the same as the main element*/
    background-image :  
        -webkit-gradient(linear, left bottom, right top, 
            from(rgba(0,0,0,0)), 
            color-stop(0.5, rgba(0,0,0,0)), 
            color-stop(0.5, rgba(255,255,255,0.1)), 
            to(rgba(255,255,255,0.3))); 
    height : 25px;
    width: 25px;
    -webkit-transform : rotate(-45deg) skew(-10deg, -10deg);
    -webkit-border-top-right-radius : 100px 40px;
    -webkit-border-top-left-radius : 30px 2px;
    -webkit-border-bottom-right-radius : 2px 30px;
    -webkit-border-bottom-left-radius : 40px 100px;
    z-index : 1;
    content : ' ';
    border-left : 1.5px solid rgba(255,255,255,0.3);
    box-shadow :  1px 1px 0 rgba(0,0,0,0.2) inset,
        -1px 1px 1px rgba(0,0,0,0.5) inset;
    -webkit-mask-image : 
        -webkit-gradient(linear, left top, right bottom,
            from(#000000), 
            color-stop(0.33,#000000), 
            color-stop(0.5, transparent), 
            to(transparent));
}

Style it to your needs

stylable element debugging:

Comparison:

Original iOS 5

my Version 2

(work in progress)

my Version 1

Sencha Touch

CSS3wizardry

hedgerwow

jeffbatterton

Since this is pure CSS3 it will always display as crisp and sharp as possible on any screen resolution.

you can see the result in the image above or watch it live in the fiddle below (webkit Browsers only )

Version 1

Version 2

Version 2 with “Forward” Arrow

Cross browser version (Opera, Firefox compatible)

Incoming search terms:

ios back button, css3 arrow, css arrow button, css3 arrow buttons, arrow button css, css3 back button, css ios back button, css3 arrows, css3 arrow button, css arrow buttons, css3 ios back button, back button ios, back button css, ios back button css, ios back button css3, css ios button, back button css3, css ios buttons, ios buttons, ios back button png, ios style buttons css, ios arrow, iPhone Back Button CSS, back button, css iphone back button, IOS ARROWS, ios button css, css3 iphone back button, ios style buttons, button arrow css3,

Gregor Adams

Hi, I am a web-programmer and frontend-developer from Germany. I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.

Steve Sauder

Just spectacular – thanks so much for this, saved my day!
Prodyot

Hi from India to Gregor and Robert.
Thanks for the buttons.
They are beautiful and very useful.
By the way, I liked your Booklet too.
Thanks for sharing them.
Best wishes to both of you.
- http://pixelass.com Gregor Adams
  
  Thx for the comment. I’m glad you enjoy my works. The booklet is currently in development, but I managed to get a nice effect with dragging.
  See an early alpha here: http://webkit-os.pixelass.com/flipbooktest
  
  It’s kinda chunky for some browsers but should already do fine in Safari, Firefox, Chrome on OS X 10.6 + 10.7 (tested in latest versions). I can get it really smooth if I remove the box shadows but that kills the looks.
  
  WorkInProgress….
  
  I just started a new job so the beta will be delayed a little. Feel free to use the code though. I might put it on GITHUB within the next few weeks.
  
  Cheers
Anthony Ricaud

Sorry to point that out but you’re title is misleading. This is not “pure CSS3″ at all. First, it would be nice to include non -webkit- prefixes.

But mostly, -webkit-mask-image has never been part of CSS3. I’ve never seen someone propose this to the CSS Working Group.

I don’t want to undermine the efforts that went into finding this technique. Just a reminder that this is different than “WebKit is the first to implement”.
- http://pixelass.com Gregor Adams
  
  I don’t understand how this could not be pure CSS.
  Yes it uses a mask image but the image is a CSS gradient. Everything about this button is written in CSS with a simple markup.
  This was developed for the iPhone so that’s the reason why I’m using the webkit prefixes.
  I could add support fir Firefox, IE10 and Opera but I didn’t since it was not intended to work on these browsers. I am very sorry if you are not happy with the product… Maybe you can do it better?
  - Jason Hummel
    
    Great Job, I’ve been trying to replicate the Sencha touch back buttons, but you’re much closer than I.
    
    I believe Anthony is referring to something along the lines of this article regarding webkit-mask-image. It’s a webkit feature that hasn’t been put forth for discussion by the working groups. Some people are upset by this fact, since they see it as a similar approach to IE’s embrace, extend, extinguish approach of the 90s.
    
    I don’t concern myself much with the politics, and I find that article a bit over-the-top. I’m more of the ‘just-figure-it-out’ mentality. I think your approach could work it’s just that mozilla uses the plain old ‘mask’ property. I don’t think it’s even vendor-prefixed, as it’s part of the standard SVG spec.
    
    Again great job, I’m going to use this on my current project.
- http://pixelass.com Gregor Adams
  
  I just added a first Version of a Firefox and Opera compatible example (It still needs work)

Tanny OHaley

Could you please explain how to change the colors?

http://pixelass.com Gregor Adams

Look at this example >>> a pink arrow button

using

 
#ios-arrow-left,
#ios-arrow-left:before {
    background-color: rgba(155,48,75,1);/*normal color*/
 
}
 
#ios-arrow-left:hover,
#ios-arrow-left:hover:before {
    background-color: rgba(124,38,55,1);/*hovercolor*/
 
}

ville

Lovely work, unfortunately it doesn’t render well in iOS4 anyway – am I missing something?
- http://pixelass.com Gregor Adams
  
  might be.. sorry I really can’t test it since my iPhone 4 and my iPhone 4s are both on iOS 5 and the simulator uses iOS 5 too.. maybe you can send a link to a screenshot.
  If this really causes issues I can try to look into it or include it in the description/tutorial.
  
  I will put this “thing” on Github for better version management within the next weeks
  - Tom Jenkins
    
    I would imagine it doesn’t render properly in iOS 4 because it only uses the newer (w3c-like) webkit gradient syntax. I’m pretty sure Safari on iOS 4 only understands the older syntax:
    
    -webkit-gradient(
    left top, left bottom,
    color-stop(0%, rgba(0,0,0,0)),
    color-stop(50%, rgba(0,0,0,0))
    color-stop(50%, rgba(255,255,255,0.1))
    color-stop(100% rgba(255,255,255,0.3))
    );
    
    Hope that helps.
kuished

Would it be possible to make a “Forward” button?
- http://pixelass.com Gregor Adams
  
  sure.. but I’m super busy so it may take a while
- http://pixelass.com Gregor Adams
  
  I just added a forward (Playing) button
Daniel Pestana

I don’t usually comment, but FUCKING AWESOME Thanks man!
Adam

This just saved me a ton of time and looks killer. Thanks!
http://justinvincent.com JV

Amazing! Thanks so much.
Tin

I found that when trying to put this in my header, it will overlap any other element because of the absolute positioning. My solution was to:
- Remove the ‘top’ and ‘left’ positioning
- set the ‘position: relative’
- set the ‘display: inline-block’ instead of block

This way you can use it just like an back in your headers.

Hope others are also helped with this.
Djibril NDIAYE

Hi, I am very interested by your buttons.
I want to by a copy for the previous and next… but for all Chrome, Opera, FF, and Safari.
Please tell me if this is possible. Thank you.
Very nice and “tunable” work,
dbcn

Does not work in IE8.
Jared

A few comments:
-The -webkit-image-mask doesn’t appear to be properly supported in the Android browser also, but the cross-browser version renders fine.
-As tested in Chrome 24, Firefox 18, and Safari Mobile on iOS6, the background-image gradient color-stop on the before pseudo element needs to occur at 51%, not 52%, to line up with the main element. Safari appears to work at both 51% & 52%.
Richard

I have integrated this idea with the breadcrumb trail of a CMS, and the result is excellent. The default markup was:

<a href="appropriate_url" rel="nofollow">Previous Page</a>

…and hacking the underlying code to add a title attribute to supply the ‘content’ pseudoclass with text would not have been a good solution.

I therefore removed the :after bit altogether, and styled the anchor tag text with background as the overlay. So the is treated as the button base (with z-index=0), a :before pseudoclass is used to insert a space immediately before the to style as the point (with z-index=1), and the anchor tag is styled as the text element instead of the :after element in your example (also with z-index=1).

Finally, you must make sure that the :hover and :active effects for the anchor are predecated on the , so you need to select:

li:hover {background-color: #???}
li:hover > a {background-color: #???}

A very elegant solution in this context.

Regards
Richard
- Richard
  
  That markup should have been:
  <li><a href="appropriate_url">Previous Page</a></li>
kl

arrow does not appear in ie8. can you help me with that.
Pingback: arrow button in pure CSS & HTML - iOS 6 | HTML5 CSS3 Back button arrow
http://www.facebook.com/yuri.kadeev Yuri Kadeev

Thanks, Gregor! Good Work. You are best in this subject.
- pixelass
  
  THX, make sure to check out the new version http://cssnerd.com/2013/03/09/ios-6-arrow-button-pure-css-html/
JK

amazing….good work…

true css nerdism

the best pure CSS3 iOS style arrow “Back” button

Sencha Touch

css3wizardry

hedgerwow

jeffbatterton

Style it to your needs

stylable element debugging:

Comparison:

Original iOS 5

my Version 2

my Version 1

Sencha Touch

CSS3wizardry

hedgerwow

jeffbatterton

Version 1

Version 2

Version 2 with “Forward” Arrow

Cross browser version (Opera, Firefox compatible)

Incoming search terms:

Gregor Adams

Gregor Adams

Lukas Winterberg

Robert McIntosh