Grow your CSS skills. Land your dream job.

OS Style Buttons in CSS3

  • # November 13, 2012 at 7:31 am

    I thought it would be quite cool to see if I could create the Windows and OSX buttons in CSS3. Turns out it is not that hard.

    [This way to the buttons](http://codepen.io/alexmccabe/pen/neybf “OS Style Buttons”)

    They’re just standard buttons, CSS3-ified. The glow works on the Windows one (click in the white area and press tab). Unfortunately as the whole button changes gradient on focus in OSX it cannot be done with CSS3 at the moment =[

    What do you guys think? Could there be any improvements?

    # November 13, 2012 at 7:59 am

    Nice job @alexmccabe

    I like the OSx button as it is but I also like it with a bit more border-radius and changing the pointer;

    border-radius:20px;
    cursor: pointer;

    To make it a bit more Apple-like

    # November 13, 2012 at 9:09 am

    > I like the OSx button as it is but I also like it with a bit more border-radius and changing the pointer.

    Ah like the old school Tiger days. I am a real stickler for the new squarer styles the OS’s have. I can’t think of any use for them at the moment, but maybe they will be useful for other people.

    # November 13, 2012 at 9:51 am

    Yeah, it’s always good to know we can jump right over to your pen and grab the code if and when need to.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".