treehouse : what would you like to learn today?
Web Design Web Development iOS Development

OS Style Buttons in CSS3

  • 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

    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?

  • 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

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

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