The evolution of buttons in UI design
The button is an every-day element of interaction design. Although buttons looks like very simple UI elements, its design has changed a lot over time. But still button UX design is always about recognition and call to action.
Since the early days, operating system buttons relied on the appearance of relief and shadow to distinguish them from their surrounding context. This design solution was based on the simple principle, using a border, gradient and drop-shadow makes the element stand out against the background and content and this makes it easily identifiable as a user clickable control. This Windows 95 dialog box made use of heavy shadows and highlights to create 3D effect which was used to help users interpret visual hierarchy and understand which elements are interactive.
Skeuomorphic buttons was the next evolution button designs. skeuomorphism is when UI elements are made to look like real life objects, copying real life textures or making a button look like a real button. Skeuomorphic designs are intended to help users understand how to use a new interface by giving them something familiar. A prime example of skeuomorphic design is the trash can, the trash can let users drag stuff they didn't want on their computers to an actual bin. Users weren't confused because they had something to reference them against in real life.
Apple introduced a major shift in button design with the release of iOS 7. Apple's flat design stripped away 3D effects. Unlike skeuomorphic design, flat design was seen as a way to explore the digital medium without trying to reproduce the appearance of the physical world. As a consequence, it removed the visual cues that have been traditionally used to communicate user interactions. Users still need visual signifiers to know where they can click/tap on a page. Color is important in flat design, because when using flat buttons, these colors will be one of the main identifiers that help the user recognize them.
The flat design evolved into an almost flat design that was started by Google's Android. This style is mostly flat, but makes use of subtle shadows, highlights, and layers to create some depth in the UI. Google's Material Design language brings a new type of buttons, floating action buttons. These buttons are layered over the top of the interface and draw attention to user interaction. They act as call to action buttons meant to represent a single action users perform the most on that particular screen. Maps by Google is a great example, the main function used by users on Maps is to get directions, so there is a floating action button prominently on top.
One of the most trends used design trends has been the ghost buttons. Ghost buttons are transparent and empty buttons that have a basic shape form, such as a rectangular or a square. Ghost buttons are generally bordered by a very thin line, while internal section consists of plain text. The origin of the Ghost Button came from the flat design revolution and ghost buttons became trendy when Apple released iOS 7. Many of the buttons on iOS's UI are ghost buttons. Simple and plain rectangular shape in combination with neat font inside the frame look perfectly within flat UI. The have visual cues with it's borders while offering a clean look.