CSSNERD

CSS at its best

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

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

css3wizardry

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

hedgerwow

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

jeffbatterton

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
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…
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

    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.
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

    -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.
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 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
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.
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 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

    -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.
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 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

#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

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
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
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

stylable element debugging:

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

Comparison:

Original iOS 5

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

my Version 2

(work in progress)
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

my Version 1

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

Sencha Touch

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

CSS3wizardry

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

hedgerwow

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

jeffbatterton

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
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 back button,  arrow button css,  css3 arrow buttons,  css ios back button,  css arrow buttons,  ios back button css,  css3 arrows,  back button css,  css3 arrow button,  css3 ios back button,  back button ios,  ios back button css3,  css ios button,  back button css3,  css ios buttons,  ios back button png,  ios style buttons css,  ios buttons,  ios arrow,  css iphone back button,  iPhone Back Button CSS,  buff ly,  css button arrow examples,  Pink arrow lion killer,  arrow button images free,  iarrow ios,  how to make a iphone pointed button in css,  
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
Follow me

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.
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
Follow me
  • 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>

      • Anderland

        Hi Richard, could you share your updated css?

  • kl

    arrow does not appear in ie8. can you help me with that.

    • pixelBender67

      use an image

  • 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.

  • JK

    amazing….good work…

  • Swetapadma Champatiray

    Your demo doesn’t seem to work. Arrows are broken.

  • http://my.csdn.net/ 薛松德

    你能看懂中文吗?加我QQ185217985,交流学习!

  • http://my.csdn.net/ 薛松德

    按钮的位置控制不了,您能解释一下吗??